@bigbinary/neeto-approvals-frontend 0.2.14 → 0.2.15

package/dist/index.js

@@ -1,34 +1,36 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useMutationWithInvalidation, useDebounce, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import { Link, useLocation, useHistory, Switch, Route, Redirect, useParams } from 'react-router-dom';
 import i18next, { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select as Select$1, Callout } from '@bigbinary/neetoui';
+import { Button, Tag, Pane, Typography, Label, Textarea, Table as Table$1, NoData, Alert, Tab as Tab$1, Select, Callout } from '@bigbinary/neetoui';
 import { isEmpty, keys } from 'ramda';
-import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop, findById } from 'neetocist';
+import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop, isNotEmpty, findById } from '@bigbinary/neeto-cist';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import { useTranslation, Trans } from 'react-i18next';
 import { useQuery, useQueryClient } from 'react-query';
 import axios from 'axios';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+import { isEditorEmpty, EditorContent, FormikEditor } from '@bigbinary/neeto-editor';
+import * as yup from 'yup';
 import { dateFormat, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
-import { EditorContent, isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Form as Form$2, Input, Textarea as Textarea$1, Select } from '@bigbinary/neetoui/formik';
-import * as yup from 'yup';
-import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import { Input, Textarea as Textarea$1, Form as Form$3 } from '@bigbinary/neetoui/formik';
+import { useFormikContext } from 'formik';
+import ToggleFeatureCard from '@bigbinary/neeto-molecules/ToggleFeatureCard';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _toPrimitive(input, hint) {
@@ -66,31 +68,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -165,8 +167,8 @@ var QUERY_KEYS = {
   VIEWS: "neeto-approvals-views"
 };
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchRequests = function useFetchRequests(_ref) {
   var requestUrl = _ref.requestUrl,
     _ref$params = _ref.params,
@@ -241,7 +243,7 @@ var STATUS_TAG_STYLE = {
 };
 var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
   message: "",
-  additionalInfo: ""
+  approver: {}
 };
 var STATUS_UPDATED_BY = {
   rejected: t$1("neetoApprovals.common.rejectedBy"),
@@ -253,6 +255,14 @@ var SORT_ORDER = {
   ascend: "asc",
   descend: "desc"
 };
+var REQUEST_FORM_VALIDATION_SCHEMA = yup.object().shape({
+  message: yup.string().test("message", t$1("neetoApprovals.validations.required", {
+    what: t$1("neetoApprovals.inputs.labels.message")
+  }), function (content) {
+    return !isEditorEmpty(content);
+  }),
+  approver: yup.object().required(t$1("neetoApprovals.validations.approver"))
+});
 
 var HISTORY_TABLE_COLUMNS = [{
   dataIndex: "approvalLabel",
@@ -353,7 +363,7 @@ var dayjs_min = {exports: {}};
 dayjs_min.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof b},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new b(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,f=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=O.p(f),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return O.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return O.s(e.$y,4,"0");case"M":return a+1;case"MM":return O.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return O.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return O.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return O.s(u,2,"0");case"s":return String(e.$s);case"ss":return O.s(e.$s,2,"0");case"SSS":return O.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=O.p(d),m=w(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return O.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:O.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),_=b.prototype;return w.prototype=_,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){_[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,b,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
 } (dayjs_min, dayjs_min.exports));
 
 var dayjs_minExports = dayjs_min.exports;
@@ -364,7 +374,7 @@ var timezone$1 = {exports: {}};
 timezone$1.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,h=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",v=+e;return (o.utc(h).valueOf()-(v-=v%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
 } (timezone$1, timezone$1.exports));
 
 var timezoneExports = timezone$1.exports;
@@ -430,7 +440,6 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     _approvalDetails$stat = approvalDetails.status,
     status = _approvalDetails$stat === void 0 ? "" : _approvalDetails$stat,
     message = approvalDetails.message,
-    additionalInfo = approvalDetails.additionalInfo,
     createdAt = approvalDetails.createdAt,
     approverName = approvalDetails.approverName,
     approverEmail = approvalDetails.approverEmail,
@@ -506,11 +515,6 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent$1, {
     className: "neeto-ui-bg-gray-100 p-4",
     content: message
-  })), additionalInfo && /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.additionalInfo")), /*#__PURE__*/React.createElement(MemoizedEditorContent$1, {
-    className: "neeto-ui-bg-gray-100 p-4",
-    content: additionalInfo
   })), isPending && isCurrentUserApprover && /*#__PURE__*/React.createElement(Textarea, {
     className: "w-full",
     disabled: !isPending,
@@ -532,8 +536,8 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
   }));
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var History = function History(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -582,8 +586,9 @@ var History = function History(_ref) {
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
@@ -619,8 +624,8 @@ var PENDING_TABLE_COLUMNS = removeBy({
   key: "status"
 }, HISTORY_TABLE_COLUMNS);
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PendingRequests = function PendingRequests(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -663,8 +668,9 @@ var PendingRequests = function PendingRequests(_ref) {
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
@@ -774,8 +780,8 @@ var templatesApi = {
   show: show$1
 };
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -812,46 +818,15 @@ var useDeleteTemplate = function useDeleteTemplate(options) {
   }, options));
 };
 
-var fetch$1 = function fetch(params) {
-  return axios.get("".concat(BASE_URL, "/approvers"), {
-    params: params
-  });
-};
-var approversApi = {
-  fetch: fetch$1
-};
-
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFetchApprovers = function useFetchApprovers() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.APPROVERS, params], function () {
-    return approversApi.fetch(params);
-  }, _objectSpread$7({
-    select: function select(response) {
-      return response.data || response;
-    },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var approvers = _ref.approvers;
-      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
-    }
-  }, options));
-};
-
 var TEMPLATE_FORM_INITIAL_VALUES = {
   name: "",
   description: "",
-  approver: "",
   message: ""
 };
 var TEMPLATE_FORM_VALIDATION_SCHEMA = yup.object().shape({
   name: yup.string().trim().required(t$1("neetoApprovals.validations.required", {
     what: t$1("neetoApprovals.common.name")
   })),
-  approver: yup.object().required(t$1("neetoApprovals.validations.approver")),
   message: yup.string().test("message", t$1("neetoApprovals.validations.required", {
     what: t$1("neetoApprovals.inputs.labels.message")
   }), function (content) {
@@ -862,9 +837,12 @@ var TEMPLATE_FORM_VALIDATION_SCHEMA = yup.object().shape({
 var MessageEditor = withT(function (_ref) {
   var t = _ref.t,
     _ref$placeholders = _ref.placeholders,
-    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders;
+    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
   return /*#__PURE__*/React.createElement(FormikEditor, {
     required: true,
+    initialValue: initialValue,
     label: t("neetoApprovals.inputs.labels.message"),
     name: "message",
     rows: 3,
@@ -875,8 +853,46 @@ var MessageEditor = withT(function (_ref) {
   });
 });
 
-var Form$1 = function Form(_ref) {
-  var _t;
+var TemplateForm = function TemplateForm(_ref) {
+  var placeholders = _ref.placeholders,
+    initialData = _ref.initialData;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleDescriptionToggle = function handleDescriptionToggle(_ref2) {
+    var checked = _ref2.target.checked;
+    setFieldValue("descriptionEnabled", checked);
+    if (!checked) {
+      setFieldValue("description", "");
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col space-y-6"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    required: true,
+    label: t("neetoApprovals.common.name"),
+    name: "name",
+    placeholder: t("neetoApprovals.inputs.placeholders.name")
+  }), /*#__PURE__*/React.createElement(ToggleFeatureCard, {
+    switchName: "descriptionEnabled",
+    switchProps: {
+      onChange: handleDescriptionToggle
+    },
+    title: t("neetoApprovals.inputs.labels.description")
+  }, values.descriptionEnabled && /*#__PURE__*/React.createElement(Textarea$1, {
+    className: "w-full",
+    name: "description",
+    placeholder: t("neetoApprovals.inputs.placeholders.description")
+  })), /*#__PURE__*/React.createElement(MessageEditor, {
+    placeholders: placeholders,
+    initialValue: initialData.message
+  }));
+};
+
+var Form$2 = function Form(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     _ref$initialData = _ref.initialData,
@@ -889,15 +905,10 @@ var Form$1 = function Form(_ref) {
   var inputReference = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchApprovers = useFetchApprovers(),
-    _useFetchApprovers$da = _useFetchApprovers.data,
-    _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
-    _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
-    approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
   var header = isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
-    what: t("neetoApprovals.common.template", SINGULAR).toLocaleLowerCase()
+    what: t("neetoApprovals.common.template", SINGULAR)
   }) : t("neetoApprovals.common.edit_", {
-    what: t("neetoApprovals.common.template", SINGULAR).toLocaleLowerCase()
+    what: t("neetoApprovals.common.template", SINGULAR)
   });
   return /*#__PURE__*/React.createElement(Pane, {
     initialFocusRef: inputReference,
@@ -906,44 +917,17 @@ var Form$1 = function Form(_ref) {
     onClose: onClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
-  }, header)), /*#__PURE__*/React.createElement(Form$2, {
+  }, header)), /*#__PURE__*/React.createElement(Form$3, {
     formikProps: {
       enableReinitialize: true,
       initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
       validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
       onSubmit: onSubmit
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    required: true,
-    label: t("neetoApprovals.common.name"),
-    name: "name",
-    placeholder: t("neetoApprovals.inputs.placeholders.name")
-  }), /*#__PURE__*/React.createElement(Textarea$1, {
-    className: "w-full",
-    label: t("neetoApprovals.inputs.labels.description"),
-    name: "description",
-    placeholder: t("neetoApprovals.inputs.placeholders.description")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-6"
-  }, /*#__PURE__*/React.createElement(Select, {
-    required: true,
-    label: t("neetoApprovals.inputs.labels.approver"),
-    name: "approver",
-    options: approvers.map(function (approver) {
-      return {
-        label: approver.name,
-        value: approver.id
-      };
-    }),
-    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
-      what: (_t = t("neetoApprovals.common.approver", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(MessageEditor, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(TemplateForm, {
+    initialData: initialData,
     placeholders: placeholders
-  }))), /*#__PURE__*/React.createElement(Pane.Footer, {
+  })), /*#__PURE__*/React.createElement(Pane.Footer, {
     className: "flex gap-x-2"
   }, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-approvals-templates-save-template-btn",
@@ -958,26 +942,6 @@ var Form$1 = function Form(_ref) {
   })))));
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var buildTemplatePayload = function buildTemplatePayload(template) {
-  var approver = template.approver;
-  var payload = {
-    template: _objectSpread$6(_objectSpread$6({}, template), {}, {
-      approverId: approver.value
-    })
-  };
-  return payload;
-};
-var generateInitialData = function generateInitialData(template) {
-  return _objectSpread$6(_objectSpread$6({}, template), {}, {
-    approver: {
-      label: template.approverName,
-      value: template.approverId
-    }
-  });
-};
-
 var Create = function Create(_ref) {
   var templateUrl = _ref.templateUrl,
     isOpen = _ref.isOpen,
@@ -987,7 +951,9 @@ var Create = function Create(_ref) {
     createTemplate = _useCreateTemplate.mutate,
     isLoading = _useCreateTemplate.isLoading;
   var onSubmit = function onSubmit(template) {
-    var payload = buildTemplatePayload(template);
+    var payload = {
+      template: template
+    };
     createTemplate({
       url: templateUrl,
       payload: payload
@@ -995,7 +961,7 @@ var Create = function Create(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$2, {
     placeholders: templatePlaceholders,
     isLoading: isLoading,
     isOpen: isOpen,
@@ -1004,6 +970,8 @@ var Create = function Create(_ref) {
   });
 };
 
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Edit = function Edit(_ref) {
   var templateUrl = _ref.templateUrl,
     template = _ref.template,
@@ -1019,20 +987,25 @@ var Edit = function Edit(_ref) {
     updateTemplate = _useUpdateTemplate.mutate,
     isUpdating = _useUpdateTemplate.isLoading;
   var onSubmit = function onSubmit(template) {
-    var payload = buildTemplatePayload(template);
+    var payload = {
+      template: template
+    };
     updateTemplate({
       id: template.id,
       payload: payload,
       url: templateUrl
     });
   };
-  return /*#__PURE__*/React.createElement(Form$1, {
-    initialData: generateInitialData(template),
+  var initialData = _objectSpread$7(_objectSpread$7({}, template), {}, {
+    descriptionEnabled: !!template.description
+  });
+  return /*#__PURE__*/React.createElement(Form$2, {
     isLoading: isUpdating,
     placeholders: templatePlaceholders,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit
+    onSubmit: onSubmit,
+    initialData: initialData
   });
 };
 
@@ -1059,7 +1032,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
     t = _useTranslation.t;
   var name = template.name,
     description = template.description,
-    approverName = template.approverName,
     message = template.message;
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
@@ -1076,9 +1048,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }), /*#__PURE__*/React.createElement(Field$1, {
     label: t("neetoApprovals.inputs.labels.description"),
     value: description
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.common.approver", SINGULAR),
-    value: approverName
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex w-full flex-col space-y-4"
   }, /*#__PURE__*/React.createElement(Label, {
@@ -1110,8 +1079,8 @@ var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
 };
 
 var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick", "pageProperties"];
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
   var _t;
   var entity = _ref.entity,
@@ -1133,7 +1102,7 @@ var Table = function Table(_ref) {
     onDeleteClick: onDeleteClick
   });
   var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$5(_objectSpread$5({}, filters), {}, {
+    setFilters(_objectSpread$6(_objectSpread$6({}, filters), {}, {
       sortBy: sorter.field,
       orderBy: SORT_ORDER[sorter.order]
     }));
@@ -1162,7 +1131,7 @@ var Table = function Table(_ref) {
     }, !filters.searchTerm && noDataProps)));
   }
   return /*#__PURE__*/React.createElement(TableWrapper, {
-    className: "mt-12",
+    className: "mt-6",
     hasPagination: totalCount > pageProperties.pageSize
   }, /*#__PURE__*/React.createElement(Table$1, _extends({
     fixedHeight: true,
@@ -1177,7 +1146,7 @@ var Table = function Table(_ref) {
       hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < DEFAULT_PAGE_SIZE + 1
     },
     onChange: handleTableChange
-  }, _objectSpread$5({
+  }, _objectSpread$6({
     rowData: rowData,
     totalCount: totalCount
   }, otherProps))));
@@ -1221,16 +1190,15 @@ var columnData = function columnData(_ref) {
       }));
     }
   }, {
-    dataIndex: "approverName",
-    key: "approverName",
-    sorter: true,
-    title: i18next.t("neetoApprovals.common.approver", SINGULAR)
+    dataIndex: "description",
+    key: "description",
+    title: i18next.t("neetoApprovals.inputs.labels.description")
   }];
 };
 
 var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Templates = function Templates(_ref) {
   var _t, _t2, _t3;
   var searchTerm = _ref.searchTerm,
@@ -1268,7 +1236,7 @@ var Templates = function Templates(_ref) {
   useEffect(function () {
     resetPageProperties();
   }, [searchTerm]);
-  var _useFetchTemplates = useFetchTemplates(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, pageProperties), filters), {}, {
+  var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
     }), {
       onSuccess: function onSuccess(_ref2) {
@@ -1371,8 +1339,8 @@ var Templates = function Templates(_ref) {
   }));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createRoutes = function createRoutes(_ref) {
   var config = _ref.config,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
@@ -1380,7 +1348,7 @@ var createRoutes = function createRoutes(_ref) {
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
-      return /*#__PURE__*/React.createElement(Templates, _objectSpread$3({
+      return /*#__PURE__*/React.createElement(Templates, _objectSpread$4({
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
         searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
@@ -1436,20 +1404,20 @@ var Header = function Header(_ref) {
   });
 };
 
-var fetch = function fetch() {
+var fetch$1 = function fetch() {
   return axios.get("".concat(BASE_URL, "/views"));
 };
 var viewsApi = {
-  fetch: fetch
+  fetch: fetch$1
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchViews = function useFetchViews() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return useQuery([QUERY_KEYS.VIEWS], function () {
     return viewsApi.fetch();
-  }, _objectSpread$2({
+  }, _objectSpread$3({
     select: function select(response) {
       return response.data || response;
     }
@@ -1489,8 +1457,8 @@ var Tab = function Tab(_ref) {
   }));
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Approvals = function Approvals(_ref) {
   var config = _ref.config;
   var _useQueryParams = useQueryParams(),
@@ -1507,8 +1475,8 @@ var Approvals = function Approvals(_ref) {
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals"
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$1({
+    className: "w-full overflow-y-auto"
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$2({
     appRoutes: appRoutes
   }, config)), /*#__PURE__*/React.createElement(Tab, {
     approvalsPath: config.approvalsPath
@@ -1530,45 +1498,156 @@ var Approvals = function Approvals(_ref) {
   }))));
 };
 
-var Form = function Form(_ref) {
-  var _t;
-  var isOpen = _ref.isOpen,
-    setIsPaneOpen = _ref.setIsPaneOpen,
-    onSubmit = _ref.onSubmit,
-    isLoading = _ref.isLoading,
-    _ref$requestableId = _ref.requestableId,
-    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedTemplateData = _useState2[0],
-    setSelectedTemplateData = _useState2[1];
+var fetch = function fetch(params) {
+  return axios.get("".concat(BASE_URL, "/approvers"), {
+    params: params
+  });
+};
+var approversApi = {
+  fetch: fetch
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchApprovers = function useFetchApprovers() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([QUERY_KEYS.APPROVERS, params], function () {
+    return approversApi.fetch(params);
+  }, _objectSpread$1({
+    select: function select(response) {
+      return response.data || response;
+    },
+    keepPreviousData: true,
+    onSuccess: function onSuccess(_ref) {
+      var _params$onSuccess;
+      var approvers = _ref.approvers;
+      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
+    }
+  }, options));
+};
+
+var Form$1 = function Form(_ref) {
+  var _globalProps$user;
+  var _ref$requestableId = _ref.requestableId,
+    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId,
+    selectedTemplateData = _ref.selectedTemplateData,
+    setSelectedTemplateData = _ref.setSelectedTemplateData;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFetchTemplates = useFetchTemplates({
-      requestableId: requestableId
-    }),
+  var _useFormikContext = useFormikContext(),
+    resetForm = _useFormikContext.resetForm,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var inputRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    approverId = _useState2[0],
+    setApproverId = _useState2[1];
+  var templateParams = {
+    requestableId: requestableId,
+    approverId: approverId,
+    approvalRequestorId: (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id
+  };
+  var _useFetchTemplates = useFetchTemplates(templateParams),
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
+  var _useFetchApprovers = useFetchApprovers(),
+    _useFetchApprovers$da = _useFetchApprovers.data,
+    _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
+    _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
+    approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
+  var approverOptions = useMemo(function () {
+    return approvers.map(function (approver) {
+      return {
+        label: approver.name,
+        value: approver.id
+      };
+    });
+  }, [approvers]);
   var templateOptions = templates.map(function (template) {
     return {
       label: template.name,
       value: template.id
     };
   });
-  var handleTemplateChange = function handleTemplateChange(selectedTemplate, setFieldValue, resetForm) {
+  var updateMessage = function updateMessage(template) {
+    var _inputRef$current;
+    var message = template.parsedMessage || template.message;
+    setFieldValue("message", message);
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.editor) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.commands) === null || _inputRef$current === void 0 || _inputRef$current.setContent(message);
+  };
+  var handleTemplateChange = function handleTemplateChange(selectedTemplate) {
     resetForm();
     var template = findById(selectedTemplate.value, templates);
     setSelectedTemplateData(template);
-    setFieldValue("message", template.parsedMessage || template.message);
+    updateMessage(template);
+  };
+  var handleApproverChange = function handleApproverChange(approver) {
+    setApproverId(approver.value);
+    setFieldValue("approver", approver);
   };
+  useEffect(function () {
+    if (!(isNotEmpty(templates) && isNotEmpty(selectedTemplateData))) return;
+    var template = findById(selectedTemplateData.id, templates);
+    updateMessage(template);
+  }, [templates]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-6"
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: t("neetoApprovals.select.approval"),
+    options: templateOptions,
+    onChange: function onChange(selectedTemplate) {
+      return handleTemplateChange(selectedTemplate);
+    }
+  }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex space-x-6"
+  }, /*#__PURE__*/React.createElement(Select, {
+    required: true,
+    label: t("neetoApprovals.inputs.labels.approver"),
+    name: "approver",
+    options: approverOptions,
+    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
+      what: t("neetoApprovals.common.approver", SINGULAR)
+    }),
+    onChange: handleApproverChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React.createElement(FormikEditor, {
+    required: true,
+    label: t("neetoApprovals.inputs.labels.message"),
+    name: "message",
+    ref: inputRef,
+    rows: 3,
+    placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
+      what: t("neetoApprovals.inputs.labels.message")
+    })
+  }))));
+};
+
+var Form = function Form(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    onSubmit = _ref.onSubmit,
+    isLoading = _ref.isLoading,
+    _ref$requestableId = _ref.requestableId,
+    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTemplateData = _useState2[0],
+    setSelectedTemplateData = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var onClose = function onClose() {
     setIsPaneOpen(false);
     setSelectedTemplateData({});
   };
   var handleSubmit = function handleSubmit(values) {
-    return onSubmit(values, selectedTemplateData, onClose);
+    onSubmit({
+      message: values.message,
+      approverId: values.approver.value
+    }, selectedTemplateData, onClose);
   };
   return /*#__PURE__*/React.createElement(Pane, {
     isOpen: isOpen,
@@ -1576,39 +1655,20 @@ var Form = function Form(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
   }, t("neetoApprovals.common.add_", {
-    what: (_t = t("neetoApprovals.common.approval", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Form$2, {
+    what: t("neetoApprovals.common.approval", SINGULAR)
+  }))), /*#__PURE__*/React.createElement(Form$3, {
     formikProps: {
       onSubmit: handleSubmit,
-      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES
+      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
+      validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
     }
   }, function (_ref2) {
-    var _t2;
-    var setFieldValue = _ref2.setFieldValue,
-      resetForm = _ref2.resetForm,
-      dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-6"
-    }, /*#__PURE__*/React.createElement(Select$1, {
-      label: t("neetoApprovals.select.approval"),
-      options: templateOptions,
-      onChange: function onChange(selectedTemplate) {
-        return handleTemplateChange(selectedTemplate, setFieldValue, resetForm);
-      }
-    }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React.createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(EditorContent, {
-      className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-      name: "message",
-      content: (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.parsedMessage) || (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message)
-    })), /*#__PURE__*/React.createElement(FormikEditor, {
-      label: t("neetoApprovals.inputs.labels.additionalInfo"),
-      name: "additionalInfo",
-      rows: 3,
-      placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
-        what: (_t2 = t("neetoApprovals.inputs.labels.additionalInfo")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase()
-      })
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
+      requestableId: requestableId,
+      selectedTemplateData: selectedTemplateData,
+      setSelectedTemplateData: setSelectedTemplateData
+    })), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "flex gap-x-2"
     }, /*#__PURE__*/React.createElement(Button, {
       disabled: !dirty,
@@ -1646,8 +1706,8 @@ var publicRequestsApi = {
   decline: decline
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchPublicRequest = function useFetchPublicRequest(_ref, options) {
   var requestId = _ref.requestId;
   return useQuery([QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId], function () {
@@ -1761,7 +1821,7 @@ var Public = function Public() {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-approvals-dropdown__button{border-radius:0!important;font-weight:var(--neeto-ui-font-normal);min-height:34px;min-width:150px;text-align:left;width:100%}.neeto-approvals-scrollbar__inner{height:200px;width:100%}.neeto-approvals-scrollbar__outer{height:150px;left:0;overflow:\"hidden\";position:\"absolute\";top:0;visibility:\"hidden\";width:200px}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}.neeto-approvals-empty-state{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.neeto-approvals-empty-state__image{align-items:center;display:flex;justify-content:center;margin-bottom:2rem}.neeto-approvals-empty-state__title--with-action-block{margin-bottom:1rem}.neeto-approvals-empty-state__action-block{display:flex;justify-content:center}.neeto-approvals{overflow:auto;width:100%}.neeto-approvals__table-wrapper{height:calc(100vh - 205px);margin-top:3rem;width:100%}.neeto-approvals-table__column{align-items:center;display:flex;gap:.5rem}.neeto-approvals-form__header{margin-bottom:.5rem}.neeto-approvals-form__body{padding-bottom:1rem;width:100%}.neeto-approvals-form__body>*+*{margin-top:1rem}.neeto-approvals-form__footer{display:flex;gap:.5rem}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19iYXNlLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19vdmVycmlkZXMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lbXB0eS1zdGF0ZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL3BhZ2VzL19hcHByb3ZhbHMuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxrQ0FDRSx5QkFBQSxDQUNBLHVDQUFBLENBQ0EsZUFBQSxDQUNBLGVBQUEsQ0FDQSxlQUFBLENBQ0EsVUNDRixDREdFLGtDQUVFLFlBQUEsQ0FEQSxVQ0NKLENER0Usa0NBS0UsWUFBQSxDQUZBLE1BQUEsQ0FHQSxpQkFBQSxDQUxBLG1CQUFBLENBQ0EsS0FBQSxDQUtBLG1CQUFBLENBSEEsV0NFSixDQ25CSSxnRkFDRSxjRHNCTixDQ2hCQSx5QkFDRSxzQkRtQkYsQ0U3QkEsNkJBQ0Usa0JBQUEsQ0FDQSxZQUFBLENBQ0EsV0FBQSxDQUNBLHNCQUFBLENBQ0EsVUZnQ0YsQ0U5QkUsb0NBR0Usa0JBQUEsQ0FGQSxZQUFBLENBQ0Esc0JBQUEsQ0FFQSxrQkZnQ0osQ0U1QkksdURBQ0Usa0JGOEJOLENFMUJFLDJDQUNFLFlBQUEsQ0FDQSxzQkY0QkosQ0dsREEsaUJBQ0UsYUFBQSxDQUNBLFVIcURGLENHbkRFLGdDQUNFLDBCQUFBLENBRUEsZUFBQSxDQURBLFVIc0RKLENHakRJLCtCQUVFLGtCQUFBLENBREEsWUFBQSxDQUVBLFNIbUROLENHOUNJLDhCQUNFLG1CSGdETixDRzdDSSw0QkFFRSxtQkFBQSxDQURBLFVIZ0ROLENHOUNNLGdDQUNFLGVIZ0RSLENHNUNJLDhCQUNFLFlBQUEsQ0FDQSxTSDhDTiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1hcHByb3ZhbHMtZHJvcGRvd25fX2J1dHRvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDAgIWltcG9ydGFudDtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLW5lZXRvLXVpLWZvbnQtbm9ybWFsKTtcbiAgbWluLWhlaWdodDogMzRweDtcbiAgbWluLXdpZHRoOiAxNTBweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by1hcHByb3ZhbHMtc2Nyb2xsYmFyIHtcbiAgJl9faW5uZXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMjAwcHg7XG4gIH1cblxuICAmX19vdXRlciB7XG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIjtcbiAgICB0b3A6IDBweDtcbiAgICBsZWZ0OiAwcHg7XG4gICAgd2lkdGg6IDIwMHB4O1xuICAgIGhlaWdodDogMTUwcHg7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCI7XG4gICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIjtcbiAgfVxufVxuIiwiLm5lZXRvLWFwcHJvdmFscy1kcm9wZG93bl9fYnV0dG9uIHtcbiAgYm9yZGVyLXJhZGl1czogMCAhaW1wb3J0YW50O1xuICBmb250LXdlaWdodDogdmFyKC0tbmVldG8tdWktZm9udC1ub3JtYWwpO1xuICBtaW4taGVpZ2h0OiAzNHB4O1xuICBtaW4td2lkdGg6IDE1MHB4O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1zY3JvbGxiYXJfX2lubmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMjAwcHg7XG59XG4ubmVldG8tYXBwcm92YWxzLXNjcm9sbGJhcl9fb3V0ZXIge1xuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiO1xuICB0b3A6IDBweDtcbiAgbGVmdDogMHB4O1xuICB3aWR0aDogMjAwcHg7XG4gIGhlaWdodDogMTUwcHg7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiO1xuICB2aXNpYmlsaXR5OiBcImhpZGRlblwiO1xufVxuXG4ubmVldG8tdWktc3ViaGVhZGVyIC5uZWV0by11aS1zdWJoZWFkZXJfX2xlZnQtd3JhcHBlciAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0IHtcbiAgbWF4LXdpZHRoOiBub25lO1xufVxuXG50ZC5hbnQtdGFibGUtY29sdW1uLXNvcnQge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xufVxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZV9faW1hZ2Uge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZW1wdHktc3RhdGVfX3RpdGxlLS13aXRoLWFjdGlvbi1ibG9jayB7XG4gIG1hcmdpbi1ib3R0b206IDFyZW07XG59XG4ubmVldG8tYXBwcm92YWxzLWVtcHR5LXN0YXRlX19hY3Rpb24tYmxvY2sge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cblxuLm5lZXRvLWFwcHJvdmFscyB7XG4gIG92ZXJmbG93OiBhdXRvO1xuICB3aWR0aDogMTAwJTtcbn1cbi5uZWV0by1hcHByb3ZhbHNfX3RhYmxlLXdyYXBwZXIge1xuICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAyMDVweCk7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXJnaW4tdG9wOiAzcmVtO1xufVxuLm5lZXRvLWFwcHJvdmFscy10YWJsZV9fY29sdW1uIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiAwLjVyZW07XG59XG4ubmVldG8tYXBwcm92YWxzLWZvcm1fX2hlYWRlciB7XG4gIG1hcmdpbi1ib3R0b206IDAuNXJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZm9ybV9fYm9keSB7XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nLWJvdHRvbTogMXJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZm9ybV9fYm9keSA+ICogKyAqIHtcbiAgbWFyZ2luLXRvcDogMXJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZm9ybV9fZm9vdGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAwLjVyZW07XG59IiwiLm5lZXRvLXVpLXN1YmhlYWRlciB7XG4gIC5uZWV0by11aS1zdWJoZWFkZXJfX2xlZnQtd3JhcHBlciB7XG4gICAgLm5lZXRvLXVpLXN1YmhlYWRlcl9fbGVmdCB7XG4gICAgICBtYXgtd2lkdGg6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbi8vIEFudCBEZXNpZ24gT3ZlcnJpZGVzXG50ZC5hbnQtdGFibGUtY29sdW1uLXNvcnQge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cbiIsIi5uZWV0by1hcHByb3ZhbHMtZW1wdHktc3RhdGUge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB3aWR0aDogMTAwJTtcblxuICAmX19pbWFnZSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIG1hcmdpbi1ib3R0b206IDJyZW07XG4gIH1cblxuICAmX190aXRsZSB7XG4gICAgJi0td2l0aC1hY3Rpb24tYmxvY2sge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMXJlbTtcbiAgICB9XG4gIH1cblxuICAmX19hY3Rpb24tYmxvY2sge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIH1cbn1cbiIsIi5uZWV0by1hcHByb3ZhbHMge1xuICBvdmVyZmxvdzogYXV0bztcbiAgd2lkdGg6IDEwMCU7XG5cbiAgJl9fdGFibGUtd3JhcHBlciB7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMjA1cHgpO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1hcmdpbi10b3A6IDNyZW07XG4gIH1cblxuICAmLXRhYmxlIHtcbiAgICAmX19jb2x1bW4ge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBnYXA6IDAuNXJlbTtcbiAgICB9XG4gIH1cblxuICAmLWZvcm0ge1xuICAgICZfX2hlYWRlciB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAwLjVyZW07XG4gICAgfVxuXG4gICAgJl9fYm9keSB7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHBhZGRpbmctYm90dG9tOiAxcmVtO1xuICAgICAgJiA+ICogKyAqIHtcbiAgICAgICAgbWFyZ2luLXRvcDogMXJlbTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmX19mb290ZXIge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGdhcDogMC41cmVtO1xuICAgIH1cbiAgfVxufVxuIl19 */";
+var css = ".neeto-approvals-dropdown__button{border-radius:0!important;font-weight:var(--neeto-ui-font-normal);min-height:34px;min-width:150px;text-align:left;width:100%}.neeto-approvals-scrollbar__inner{height:200px;width:100%}.neeto-approvals-scrollbar__outer{height:150px;left:0;overflow:\"hidden\";position:\"absolute\";top:0;visibility:\"hidden\";width:200px}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}.neeto-approvals-empty-state{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.neeto-approvals-empty-state__image{align-items:center;display:flex;justify-content:center;margin-bottom:2rem}.neeto-approvals-empty-state__title--with-action-block{margin-bottom:1rem}.neeto-approvals-empty-state__action-block{display:flex;justify-content:center}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19iYXNlLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zcmMvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9iYXNlL19vdmVycmlkZXMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19lbXB0eS1zdGF0ZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtDQUNFLHlCQUFBLENBQ0EsdUNBQUEsQ0FDQSxlQUFBLENBQ0EsZUFBQSxDQUNBLGVBQUEsQ0FDQSxVQ0NGLENER0Usa0NBRUUsWUFBQSxDQURBLFVDQ0osQ0RHRSxrQ0FLRSxZQUFBLENBRkEsTUFBQSxDQUdBLGlCQUFBLENBTEEsbUJBQUEsQ0FDQSxLQUFBLENBS0EsbUJBQUEsQ0FIQSxXQ0VKLENDbkJJLGdGQUNFLGNEc0JOLENDaEJBLHlCQUNFLHNCRG1CRixDRTdCQSw2QkFDRSxrQkFBQSxDQUNBLFlBQUEsQ0FDQSxXQUFBLENBQ0Esc0JBQUEsQ0FDQSxVRmdDRixDRTlCRSxvQ0FHRSxrQkFBQSxDQUZBLFlBQUEsQ0FDQSxzQkFBQSxDQUVBLGtCRmdDSixDRTVCSSx1REFDRSxrQkY4Qk4sQ0UxQkUsMkNBQ0UsWUFBQSxDQUNBLHNCRjRCSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1hcHByb3ZhbHMtZHJvcGRvd25fX2J1dHRvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDAgIWltcG9ydGFudDtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLW5lZXRvLXVpLWZvbnQtbm9ybWFsKTtcbiAgbWluLWhlaWdodDogMzRweDtcbiAgbWluLXdpZHRoOiAxNTBweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by1hcHByb3ZhbHMtc2Nyb2xsYmFyIHtcbiAgJl9faW5uZXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMjAwcHg7XG4gIH1cblxuICAmX19vdXRlciB7XG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIjtcbiAgICB0b3A6IDBweDtcbiAgICBsZWZ0OiAwcHg7XG4gICAgd2lkdGg6IDIwMHB4O1xuICAgIGhlaWdodDogMTUwcHg7XG4gICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCI7XG4gICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIjtcbiAgfVxufVxuIiwiLm5lZXRvLWFwcHJvdmFscy1kcm9wZG93bl9fYnV0dG9uIHtcbiAgYm9yZGVyLXJhZGl1czogMCAhaW1wb3J0YW50O1xuICBmb250LXdlaWdodDogdmFyKC0tbmVldG8tdWktZm9udC1ub3JtYWwpO1xuICBtaW4taGVpZ2h0OiAzNHB4O1xuICBtaW4td2lkdGg6IDE1MHB4O1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICB3aWR0aDogMTAwJTtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1zY3JvbGxiYXJfX2lubmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMjAwcHg7XG59XG4ubmVldG8tYXBwcm92YWxzLXNjcm9sbGJhcl9fb3V0ZXIge1xuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiO1xuICB0b3A6IDBweDtcbiAgbGVmdDogMHB4O1xuICB3aWR0aDogMjAwcHg7XG4gIGhlaWdodDogMTUwcHg7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiO1xuICB2aXNpYmlsaXR5OiBcImhpZGRlblwiO1xufVxuXG4ubmVldG8tdWktc3ViaGVhZGVyIC5uZWV0by11aS1zdWJoZWFkZXJfX2xlZnQtd3JhcHBlciAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0IHtcbiAgbWF4LXdpZHRoOiBub25lO1xufVxuXG50ZC5hbnQtdGFibGUtY29sdW1uLXNvcnQge1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cblxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xufVxuLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZV9faW1hZ2Uge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbn1cbi5uZWV0by1hcHByb3ZhbHMtZW1wdHktc3RhdGVfX3RpdGxlLS13aXRoLWFjdGlvbi1ibG9jayB7XG4gIG1hcmdpbi1ib3R0b206IDFyZW07XG59XG4ubmVldG8tYXBwcm92YWxzLWVtcHR5LXN0YXRlX19hY3Rpb24tYmxvY2sge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn0iLCIubmVldG8tdWktc3ViaGVhZGVyIHtcbiAgLm5lZXRvLXVpLXN1YmhlYWRlcl9fbGVmdC13cmFwcGVyIHtcbiAgICAubmVldG8tdWktc3ViaGVhZGVyX19sZWZ0IHtcbiAgICAgIG1heC13aWR0aDogbm9uZTtcbiAgICB9XG4gIH1cbn1cblxuLy8gQW50IERlc2lnbiBPdmVycmlkZXNcbnRkLmFudC10YWJsZS1jb2x1bW4tc29ydCB7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xufVxuIiwiLm5lZXRvLWFwcHJvdmFscy1lbXB0eS1zdGF0ZSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGhlaWdodDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHdpZHRoOiAxMDAlO1xuXG4gICZfX2ltYWdlIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbiAgfVxuXG4gICZfX3RpdGxlIHtcbiAgICAmLS13aXRoLWFjdGlvbi1ibG9jayB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAxcmVtO1xuICAgIH1cbiAgfVxuXG4gICZfX2FjdGlvbi1ibG9jayB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxufVxuIl19 */";
 n(css,{});
 
 export { Approvals, Form, Public, RequestDetailsPane };