@bigbinary/neeto-approvals-frontend 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,32 +1,30 @@
 import React, { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import Container from '@bigbinary/neeto-molecules/Container';
-import { useLocation, useHistory, Link, useParams, Switch, Route, Redirect } from 'react-router-dom';
-import { DEFAULT_PAGE_INDEX, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
+import { useLocation, useHistory, Link, Switch, Route, Redirect, useParams } from 'react-router-dom';
+import * as yup from 'yup';
+import { DEFAULT_PAGE_INDEX, SINGULAR, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { Pane, Typography, Button, Dropdown, NoData, Table as Table$1, Alert, Tag, Label, Textarea, Tab as Tab$1, Select as Select$1, Callout } from '@bigbinary/neetoui';
 import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
-import { Pane, Typography, Button, Dropdown, Table, NoData, Alert, Tag, Label, Textarea, Select as Select$1, Callout } from '@bigbinary/neetoui';
-import { isEmpty, not, assoc, fromPairs, keys, modify } from 'ramda';
+import { isEmpty, fromPairs, assoc, keys, modify } from 'ramda';
 import axios from 'axios';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
-import * as yup from 'yup';
 import { Form as Form$3, Input, Textarea as Textarea$1, Select } from '@bigbinary/neetoui/formik';
 import { MenuHorizontal, Delete } from '@bigbinary/neeto-icons';
-import { noop as noop$1, capitalize as capitalize$1, isPresent, findBy, camelToSnakeCase, removeBy, findById } from '@bigbinary/neeto-commons-frontend/pure';
-import Header$2 from '@bigbinary/neeto-molecules/Header';
-import { dateFormat, withEventTargetValue, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
+import { capitalize as capitalize$1, noop as noop$1, isPresent, findBy, camelToSnakeCase, removeBy, findById } from '@bigbinary/neeto-commons-frontend/pure';
+import { dateFormat, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
 import { EditorContent, isEditorEmpty, FormikEditor, substituteVariables } from '@bigbinary/neeto-editor';
 import { useFormikContext, FieldArray } from 'formik';
-import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
+import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 
-function _typeof$2(obj) {
+function _typeof$3(o) {
   "@babel/helpers - typeof";
 
-  return _typeof$2 = "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$2(obj);
+  return _typeof$3 = "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$3(o);
 }
 
 function _classCallCheck$2(instance, Constructor) {
@@ -35,20 +33,20 @@ function _classCallCheck$2(instance, Constructor) {
   }
 }
 
-function _toPrimitive$2(input, hint) {
-  if (_typeof$2(input) !== "object" || input === null) return input;
+function _toPrimitive$3(input, hint) {
+  if (_typeof$3(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$2(res) !== "object") return res;
+    if (_typeof$3(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
 }
 
-function _toPropertyKey$2(arg) {
-  var key = _toPrimitive$2(arg, "string");
-  return _typeof$2(key) === "symbol" ? key : String(key);
+function _toPropertyKey$3(arg) {
+  var key = _toPrimitive$3(arg, "string");
+  return _typeof$3(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperties$2(target, props) {
@@ -57,7 +55,7 @@ function _defineProperties$2(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey$2(descriptor.key), descriptor);
+    Object.defineProperty(target, _toPropertyKey$3(descriptor.key), descriptor);
   }
 }
 function _createClass$2(Constructor, protoProps, staticProps) {
@@ -102,7 +100,7 @@ function _inherits(subClass, superClass) {
 }
 
 function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof$2(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof$3(call) === "object" || typeof call === "function")) {
     return call;
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
@@ -117,8 +115,8 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
-function _defineProperty$1(obj, key, value) {
-  key = _toPropertyKey$2(key);
+function _defineProperty$2(obj, key, value) {
+  key = _toPropertyKey$3(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -132,41 +130,39 @@ function _defineProperty$1(obj, key, value) {
   return obj;
 }
 
-function _arrayWithHoles$1(arr) {
+function _arrayWithHoles$2(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArray(iter) {
+function _iterableToArray$1(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
-function _arrayLikeToArray$1(arr, len) {
+function _arrayLikeToArray$2(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
-function _unsupportedIterableToArray$1(o, minLen) {
+function _unsupportedIterableToArray$2(o, minLen) {
   if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
+  if (typeof o === "string") return _arrayLikeToArray$2(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor) n = o.constructor.name;
   if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen);
 }
 
-function _nonIterableRest$1() {
+function _nonIterableRest$2() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _toArray(arr) {
-  return _arrayWithHoles$1(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableRest$1();
+  return _arrayWithHoles$2(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableRest$2();
 }
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys$6$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$6$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var consoleLogger = {
   type: 'logger',
   log: function log(args) {
@@ -182,16 +178,12 @@ var consoleLogger = {
     if (console && console[type]) console[type].apply(console, args);
   }
 };
-
 var Logger = function () {
   function Logger(concreteLogger) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
     _classCallCheck$2(this, Logger);
-
     this.init(concreteLogger, options);
   }
-
   _createClass$2(Logger, [{
     key: "init",
     value: function init(concreteLogger) {
@@ -212,7 +204,6 @@ var Logger = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       return this.forward(args, 'log', '', true);
     }
   }, {
@@ -221,7 +212,6 @@ var Logger = function () {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
       }
-
       return this.forward(args, 'warn', '', true);
     }
   }, {
@@ -230,7 +220,6 @@ var Logger = function () {
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
       }
-
       return this.forward(args, 'error', '');
     }
   }, {
@@ -239,7 +228,6 @@ var Logger = function () {
       for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
         args[_key4] = arguments[_key4];
       }
-
       return this.forward(args, 'warn', 'WARNING DEPRECATED: ', true);
     }
   }, {
@@ -252,32 +240,33 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$f(_objectSpread$f({}, {
+      return new Logger(this.logger, _objectSpread$6$1(_objectSpread$6$1({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
+  }, {
+    key: "clone",
+    value: function clone(options) {
+      options = options || this.options;
+      options.prefix = options.prefix || this.prefix;
+      return new Logger(this.logger, options);
+    }
   }]);
-
   return Logger;
 }();
-
 var baseLogger = new Logger();
 
 var EventEmitter = function () {
   function EventEmitter() {
     _classCallCheck$2(this, EventEmitter);
-
     this.observers = {};
   }
-
   _createClass$2(EventEmitter, [{
     key: "on",
     value: function on(events, listener) {
       var _this = this;
-
       events.split(' ').forEach(function (event) {
         _this.observers[event] = _this.observers[event] || [];
-
         _this.observers[event].push(listener);
       });
       return this;
@@ -286,12 +275,10 @@ var EventEmitter = function () {
     key: "off",
     value: function off(event, listener) {
       if (!this.observers[event]) return;
-
       if (!listener) {
         delete this.observers[event];
         return;
       }
-
       this.observers[event] = this.observers[event].filter(function (l) {
         return l !== listener;
       });
@@ -302,24 +289,20 @@ var EventEmitter = function () {
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       if (this.observers[event]) {
         var cloned = [].concat(this.observers[event]);
         cloned.forEach(function (observer) {
           observer.apply(void 0, args);
         });
       }
-
       if (this.observers['*']) {
         var _cloned = [].concat(this.observers['*']);
-
         _cloned.forEach(function (observer) {
           observer.apply(observer, [event].concat(args));
         });
       }
     }
   }]);
-
   return EventEmitter;
 }();
 
@@ -343,68 +326,56 @@ function copy(a, s, t) {
     if (s[m]) t[m] = s[m];
   });
 }
-
 function getLastOfPath(object, path, Empty) {
   function cleanKey(key) {
     return key && key.indexOf('###') > -1 ? key.replace(/###/g, '.') : key;
   }
-
   function canNotTraverseDeeper() {
     return !object || typeof object === 'string';
   }
-
   var stack = typeof path !== 'string' ? [].concat(path) : path.split('.');
-
   while (stack.length > 1) {
     if (canNotTraverseDeeper()) return {};
     var key = cleanKey(stack.shift());
     if (!object[key] && Empty) object[key] = new Empty();
-
     if (Object.prototype.hasOwnProperty.call(object, key)) {
       object = object[key];
     } else {
       object = {};
     }
   }
-
   if (canNotTraverseDeeper()) return {};
   return {
     obj: object,
     k: cleanKey(stack.shift())
   };
 }
-
 function setPath(object, path, newValue) {
   var _getLastOfPath = getLastOfPath(object, path, Object),
-      obj = _getLastOfPath.obj,
-      k = _getLastOfPath.k;
-
+    obj = _getLastOfPath.obj,
+    k = _getLastOfPath.k;
   obj[k] = newValue;
 }
 function pushPath(object, path, newValue, concat) {
   var _getLastOfPath2 = getLastOfPath(object, path, Object),
-      obj = _getLastOfPath2.obj,
-      k = _getLastOfPath2.k;
-
+    obj = _getLastOfPath2.obj,
+    k = _getLastOfPath2.k;
   obj[k] = obj[k] || [];
   if (concat) obj[k] = obj[k].concat(newValue);
   if (!concat) obj[k].push(newValue);
 }
 function getPath(object, path) {
   var _getLastOfPath3 = getLastOfPath(object, path),
-      obj = _getLastOfPath3.obj,
-      k = _getLastOfPath3.k;
-
+    obj = _getLastOfPath3.obj,
+    k = _getLastOfPath3.k;
   if (!obj) return undefined;
   return obj[k];
 }
 function getPathWithDefaults(data, defaultData, key) {
   var value = getPath(data, key);
-
   if (value !== undefined) {
     return value;
   }
-
   return getPath(defaultData, key);
 }
 function deepExtend(target, source, overwrite) {
@@ -421,7 +392,6 @@ function deepExtend(target, source, overwrite) {
       }
     }
   }
-
   return target;
 }
 function regexEscape(str) {
@@ -441,10 +411,9 @@ function escape(data) {
       return _entityMap[s];
     });
   }
-
   return data;
 }
-var isIE10 = typeof window !== 'undefined' && window.navigator && window.navigator.userAgent && window.navigator.userAgent.indexOf('MSIE') > -1;
+var isIE10 = typeof window !== 'undefined' && window.navigator && typeof window.navigator.userAgentData === 'undefined' && window.navigator.userAgent && window.navigator.userAgent.indexOf('MSIE') > -1;
 var chars = [' ', ',', '?', '!', ';'];
 function looksLikeObjectPath(key, nsSeparator, keySeparator) {
   nsSeparator = nsSeparator || '';
@@ -457,104 +426,77 @@ function looksLikeObjectPath(key, nsSeparator, keySeparator) {
     return c === '?' ? '\\?' : c;
   }).join('|'), ")"));
   var matched = !r.test(key);
-
   if (!matched) {
     var ki = key.indexOf(keySeparator);
-
     if (ki > 0 && !r.test(key.substring(0, ki))) {
       matched = true;
     }
   }
-
   return matched;
 }
-
-function ownKeys$1$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function deepFind(obj, path) {
   var keySeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '.';
   if (!obj) return undefined;
   if (obj[path]) return obj[path];
   var paths = path.split(keySeparator);
   var current = obj;
-
   for (var i = 0; i < paths.length; ++i) {
     if (!current) return undefined;
-
     if (typeof current[paths[i]] === 'string' && i + 1 < paths.length) {
       return undefined;
     }
-
     if (current[paths[i]] === undefined) {
       var j = 2;
       var p = paths.slice(i, i + j).join(keySeparator);
       var mix = current[p];
-
       while (mix === undefined && paths.length > i + j) {
         j++;
         p = paths.slice(i, i + j).join(keySeparator);
         mix = current[p];
       }
-
       if (mix === undefined) return undefined;
-
+      if (mix === null) return null;
       if (path.endsWith(p)) {
         if (typeof mix === 'string') return mix;
         if (p && typeof mix[p] === 'string') return mix[p];
       }
-
       var joinedPath = paths.slice(i + j).join(keySeparator);
       if (joinedPath) return deepFind(mix, joinedPath, keySeparator);
       return undefined;
     }
-
     current = current[paths[i]];
   }
-
   return current;
 }
 
+function ownKeys$5$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$5$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var ResourceStore = function (_EventEmitter) {
   _inherits(ResourceStore, _EventEmitter);
-
-  var _super = _createSuper(ResourceStore);
-
+  var _super = _createSuper$3(ResourceStore);
   function ResourceStore(data) {
     var _this;
-
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       ns: ['translation'],
       defaultNS: 'translation'
     };
-
     _classCallCheck$2(this, ResourceStore);
-
     _this = _super.call(this);
-
     if (isIE10) {
       EventEmitter.call(_assertThisInitialized(_this));
     }
-
     _this.data = data || {};
     _this.options = options;
-
     if (_this.options.keySeparator === undefined) {
       _this.options.keySeparator = '.';
     }
-
     if (_this.options.ignoreJSONStructure === undefined) {
       _this.options.ignoreJSONStructure = true;
     }
-
     return _this;
   }
-
   _createClass$2(ResourceStore, [{
     key: "addNamespaces",
     value: function addNamespaces(ns) {
@@ -566,7 +508,6 @@ var ResourceStore = function (_EventEmitter) {
     key: "removeNamespaces",
     value: function removeNamespaces(ns) {
       var index = this.options.ns.indexOf(ns);
-
       if (index > -1) {
         this.options.ns.splice(index, 1);
       }
@@ -580,11 +521,9 @@ var ResourceStore = function (_EventEmitter) {
       var path = [lng, ns];
       if (key && typeof key !== 'string') path = path.concat(key);
       if (key && typeof key === 'string') path = path.concat(keySeparator ? key.split(keySeparator) : key);
-
       if (lng.indexOf('.') > -1) {
         path = lng.split('.');
       }
-
       var result = getPath(this.data, path);
       if (result || !ignoreJSONStructure || typeof key !== 'string') return result;
       return deepFind(this.data && this.data[lng] && this.data[lng][ns], key, keySeparator);
@@ -595,17 +534,14 @@ var ResourceStore = function (_EventEmitter) {
       var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
         silent: false
       };
-      var keySeparator = this.options.keySeparator;
-      if (keySeparator === undefined) keySeparator = '.';
+      var keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
       var path = [lng, ns];
       if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
-
       if (lng.indexOf('.') > -1) {
         path = lng.split('.');
         value = ns;
         ns = path[1];
       }
-
       this.addNamespaces(ns);
       setPath(this.data, path, value);
       if (!options.silent) this.emit('added', lng, ns, key, value);
@@ -616,13 +552,11 @@ var ResourceStore = function (_EventEmitter) {
       var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
         silent: false
       };
-
       for (var m in resources) {
         if (typeof resources[m] === 'string' || Object.prototype.toString.apply(resources[m]) === '[object Array]') this.addResource(lng, ns, m, resources[m], {
           silent: true
         });
       }
-
       if (!options.silent) this.emit('added', lng, ns, resources);
     }
   }, {
@@ -632,23 +566,19 @@ var ResourceStore = function (_EventEmitter) {
         silent: false
       };
       var path = [lng, ns];
-
       if (lng.indexOf('.') > -1) {
         path = lng.split('.');
         deep = resources;
         resources = ns;
         ns = path[1];
       }
-
       this.addNamespaces(ns);
       var pack = getPath(this.data, path) || {};
-
       if (deep) {
         deepExtend(pack, resources, overwrite);
       } else {
-        pack = _objectSpread$1$1(_objectSpread$1$1({}, pack), resources);
+        pack = _objectSpread$5$1(_objectSpread$5$1({}, pack), resources);
       }
-
       setPath(this.data, path, pack);
       if (!options.silent) this.emit('added', lng, ns, resources);
     }
@@ -658,7 +588,6 @@ var ResourceStore = function (_EventEmitter) {
       if (this.hasResourceBundle(lng, ns)) {
         delete this.data[lng][ns];
       }
-
       this.removeNamespaces(ns);
       this.emit('removed', lng, ns);
     }
@@ -671,7 +600,7 @@ var ResourceStore = function (_EventEmitter) {
     key: "getResourceBundle",
     value: function getResourceBundle(lng, ns) {
       if (!ns) ns = this.options.defaultNS;
-      if (this.options.compatibilityAPI === 'v1') return _objectSpread$1$1(_objectSpread$1$1({}, {}), this.getResource(lng, ns));
+      if (this.options.compatibilityAPI === 'v1') return _objectSpread$5$1(_objectSpread$5$1({}, {}), this.getResource(lng, ns));
       return this.getResource(lng, ns);
     }
   }, {
@@ -694,7 +623,6 @@ var ResourceStore = function (_EventEmitter) {
       return this.data;
     }
   }]);
-
   return ResourceStore;
 }(EventEmitter);
 
@@ -705,7 +633,6 @@ var postProcessor = {
   },
   handle: function handle(processors, value, key, options, translator) {
     var _this = this;
-
     processors.forEach(function (processor) {
       if (_this.processors[processor]) value = _this.processors[processor].process(value, key, options, translator);
     });
@@ -713,44 +640,30 @@ var postProcessor = {
   }
 };
 
-function ownKeys$2$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$2$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function ownKeys$4$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$4$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var checkedLoadedFor = {};
-
 var Translator = function (_EventEmitter) {
   _inherits(Translator, _EventEmitter);
-
-  var _super = _createSuper$1(Translator);
-
+  var _super = _createSuper$2(Translator);
   function Translator(services) {
     var _this;
-
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
     _classCallCheck$2(this, Translator);
-
     _this = _super.call(this);
-
     if (isIE10) {
       EventEmitter.call(_assertThisInitialized(_this));
     }
-
     copy(['resourceStore', 'languageUtils', 'pluralResolver', 'interpolator', 'backendConnector', 'i18nFormat', 'utils'], services, _assertThisInitialized(_this));
     _this.options = options;
-
     if (_this.options.keySeparator === undefined) {
       _this.options.keySeparator = '.';
     }
-
     _this.logger = baseLogger.create('translator');
     return _this;
   }
-
   _createClass$2(Translator, [{
     key: "changeLanguage",
     value: function changeLanguage(lng) {
@@ -762,11 +675,9 @@ var Translator = function (_EventEmitter) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
         interpolation: {}
       };
-
       if (key === undefined || key === null) {
         return false;
       }
-
       var resolved = this.resolve(key, options);
       return resolved && resolved.res !== undefined;
     }
@@ -779,22 +690,18 @@ var Translator = function (_EventEmitter) {
       var namespaces = options.ns || this.options.defaultNS || [];
       var wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
       var seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !options.keySeparator && !this.options.userDefinedNsSeparator && !options.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
-
       if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
         var m = key.match(this.interpolator.nestingRegexp);
-
         if (m && m.length > 0) {
           return {
             key: key,
             namespaces: namespaces
           };
         }
-
         var parts = key.split(nsSeparator);
         if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.indexOf(parts[0]) > -1) namespaces = parts.shift();
         key = parts.join(keySeparator);
       }
-
       if (typeof namespaces === 'string') namespaces = [namespaces];
       return {
         key: key,
@@ -805,45 +712,46 @@ var Translator = function (_EventEmitter) {
     key: "translate",
     value: function translate(keys, options, lastKey) {
       var _this2 = this;
-
-      if (_typeof$2(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
+      if (_typeof$3(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
         options = this.options.overloadTranslationOptionHandler(arguments);
       }
-
+      if (_typeof$3(options) === 'object') options = _objectSpread$4$1({}, options);
       if (!options) options = {};
       if (keys === undefined || keys === null) return '';
       if (!Array.isArray(keys)) keys = [String(keys)];
       var returnDetails = options.returnDetails !== undefined ? options.returnDetails : this.options.returnDetails;
       var keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
-
       var _this$extractFromKey = this.extractFromKey(keys[keys.length - 1], options),
-          key = _this$extractFromKey.key,
-          namespaces = _this$extractFromKey.namespaces;
-
+        key = _this$extractFromKey.key,
+        namespaces = _this$extractFromKey.namespaces;
       var namespace = namespaces[namespaces.length - 1];
       var lng = options.lng || this.language;
       var appendNamespaceToCIMode = options.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
-
       if (lng && lng.toLowerCase() === 'cimode') {
         if (appendNamespaceToCIMode) {
           var nsSeparator = options.nsSeparator || this.options.nsSeparator;
-
           if (returnDetails) {
-            resolved.res = "".concat(namespace).concat(nsSeparator).concat(key);
-            return resolved;
+            return {
+              res: "".concat(namespace).concat(nsSeparator).concat(key),
+              usedKey: key,
+              exactUsedKey: key,
+              usedLng: lng,
+              usedNS: namespace
+            };
           }
-
           return "".concat(namespace).concat(nsSeparator).concat(key);
         }
-
         if (returnDetails) {
-          resolved.res = key;
-          return resolved;
+          return {
+            res: key,
+            usedKey: key,
+            exactUsedKey: key,
+            usedLng: lng,
+            usedNS: namespace
+          };
         }
-
         return key;
       }
-
       var resolved = this.resolve(keys, options);
       var res = resolved && resolved.res;
       var resUsedKey = resolved && resolved.usedKey || key;
@@ -853,41 +761,34 @@ var Translator = function (_EventEmitter) {
       var joinArrays = options.joinArrays !== undefined ? options.joinArrays : this.options.joinArrays;
       var handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
       var handleAsObject = typeof res !== 'string' && typeof res !== 'boolean' && typeof res !== 'number';
-
       if (handleAsObjectInI18nFormat && res && handleAsObject && noObject.indexOf(resType) < 0 && !(typeof joinArrays === 'string' && resType === '[object Array]')) {
         if (!options.returnObjects && !this.options.returnObjects) {
           if (!this.options.returnedObjectHandler) {
             this.logger.warn('accessing an object - but returnObjects options is not enabled!');
           }
-
-          var r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, res, _objectSpread$2$1(_objectSpread$2$1({}, options), {}, {
+          var r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, res, _objectSpread$4$1(_objectSpread$4$1({}, options), {}, {
             ns: namespaces
           })) : "key '".concat(key, " (").concat(this.language, ")' returned an object instead of string.");
-
           if (returnDetails) {
             resolved.res = r;
             return resolved;
           }
-
           return r;
         }
-
         if (keySeparator) {
           var resTypeIsArray = resType === '[object Array]';
           var copy = resTypeIsArray ? [] : {};
           var newKeyToUse = resTypeIsArray ? resExactUsedKey : resUsedKey;
-
           for (var m in res) {
             if (Object.prototype.hasOwnProperty.call(res, m)) {
               var deepKey = "".concat(newKeyToUse).concat(keySeparator).concat(m);
-              copy[m] = this.translate(deepKey, _objectSpread$2$1(_objectSpread$2$1({}, options), {
+              copy[m] = this.translate(deepKey, _objectSpread$4$1(_objectSpread$4$1({}, options), {
                 joinArrays: false,
                 ns: namespaces
               }));
               if (copy[m] === deepKey) copy[m] = res[m];
             }
           }
-
           res = copy;
         }
       } else if (handleAsObjectInI18nFormat && typeof joinArrays === 'string' && resType === '[object Array]') {
@@ -900,34 +801,27 @@ var Translator = function (_EventEmitter) {
         var hasDefaultValue = Translator.hasDefaultValue(options);
         var defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, options) : '';
         var defaultValue = options["defaultValue".concat(defaultValueSuffix)] || options.defaultValue;
-
         if (!this.isValidLookup(res) && hasDefaultValue) {
           usedDefault = true;
           res = defaultValue;
         }
-
         if (!this.isValidLookup(res)) {
           usedKey = true;
           res = key;
         }
-
         var missingKeyNoValueFallbackToKey = options.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
         var resForMissing = missingKeyNoValueFallbackToKey && usedKey ? undefined : res;
         var updateMissing = hasDefaultValue && defaultValue !== res && this.options.updateMissing;
-
         if (usedKey || usedDefault || updateMissing) {
           this.logger.log(updateMissing ? 'updateKey' : 'missingKey', lng, namespace, key, updateMissing ? defaultValue : res);
-
           if (keySeparator) {
-            var fk = this.resolve(key, _objectSpread$2$1(_objectSpread$2$1({}, options), {}, {
+            var fk = this.resolve(key, _objectSpread$4$1(_objectSpread$4$1({}, options), {}, {
               keySeparator: false
             }));
             if (fk && fk.res) this.logger.warn('Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.');
           }
-
           var lngs = [];
           var fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, options.lng || this.language);
-
           if (this.options.saveMissingTo === 'fallback' && fallbackLngs && fallbackLngs[0]) {
             for (var i = 0; i < fallbackLngs.length; i++) {
               lngs.push(fallbackLngs[i]);
@@ -937,19 +831,15 @@ var Translator = function (_EventEmitter) {
           } else {
             lngs.push(options.lng || this.language);
           }
-
           var send = function send(l, k, specificDefaultValue) {
             var defaultForMissing = hasDefaultValue && specificDefaultValue !== res ? specificDefaultValue : resForMissing;
-
             if (_this2.options.missingKeyHandler) {
               _this2.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, options);
             } else if (_this2.backendConnector && _this2.backendConnector.saveMissing) {
               _this2.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, options);
             }
-
             _this2.emit('missingKey', l, namespace, k, res);
           };
-
           if (this.options.saveMissing) {
             if (this.options.saveMissingPlurals && needsPluralHandling) {
               lngs.forEach(function (language) {
@@ -962,89 +852,74 @@ var Translator = function (_EventEmitter) {
             }
           }
         }
-
         res = this.extendTranslation(res, keys, options, resolved, lastKey);
         if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = "".concat(namespace, ":").concat(key);
-
         if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
           if (this.options.compatibilityAPI !== 'v1') {
-            res = this.options.parseMissingKeyHandler(key, usedDefault ? res : undefined);
+            res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? "".concat(namespace, ":").concat(key) : key, usedDefault ? res : undefined);
           } else {
             res = this.options.parseMissingKeyHandler(res);
           }
         }
       }
-
       if (returnDetails) {
         resolved.res = res;
         return resolved;
       }
-
       return res;
     }
   }, {
     key: "extendTranslation",
     value: function extendTranslation(res, key, options, resolved, lastKey) {
       var _this3 = this;
-
       if (this.i18nFormat && this.i18nFormat.parse) {
-        res = this.i18nFormat.parse(res, _objectSpread$2$1(_objectSpread$2$1({}, this.options.interpolation.defaultVariables), options), resolved.usedLng, resolved.usedNS, resolved.usedKey, {
+        res = this.i18nFormat.parse(res, _objectSpread$4$1(_objectSpread$4$1({}, this.options.interpolation.defaultVariables), options), resolved.usedLng, resolved.usedNS, resolved.usedKey, {
           resolved: resolved
         });
       } else if (!options.skipInterpolation) {
-        if (options.interpolation) this.interpolator.init(_objectSpread$2$1(_objectSpread$2$1({}, options), {
-          interpolation: _objectSpread$2$1(_objectSpread$2$1({}, this.options.interpolation), options.interpolation)
+        if (options.interpolation) this.interpolator.init(_objectSpread$4$1(_objectSpread$4$1({}, options), {
+          interpolation: _objectSpread$4$1(_objectSpread$4$1({}, this.options.interpolation), options.interpolation)
         }));
         var skipOnVariables = typeof res === 'string' && (options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
         var nestBef;
-
         if (skipOnVariables) {
           var nb = res.match(this.interpolator.nestingRegexp);
           nestBef = nb && nb.length;
         }
-
         var data = options.replace && typeof options.replace !== 'string' ? options.replace : options;
-        if (this.options.interpolation.defaultVariables) data = _objectSpread$2$1(_objectSpread$2$1({}, this.options.interpolation.defaultVariables), data);
+        if (this.options.interpolation.defaultVariables) data = _objectSpread$4$1(_objectSpread$4$1({}, this.options.interpolation.defaultVariables), data);
         res = this.interpolator.interpolate(res, data, options.lng || this.language, options);
-
         if (skipOnVariables) {
           var na = res.match(this.interpolator.nestingRegexp);
           var nestAft = na && na.length;
           if (nestBef < nestAft) options.nest = false;
         }
-
+        if (!options.lng && this.options.compatibilityAPI !== 'v1' && resolved && resolved.res) options.lng = resolved.usedLng;
         if (options.nest !== false) res = this.interpolator.nest(res, function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           if (lastKey && lastKey[0] === args[0] && !options.context) {
             _this3.logger.warn("It seems you are nesting recursively key: ".concat(args[0], " in key: ").concat(key[0]));
-
             return null;
           }
-
           return _this3.translate.apply(_this3, args.concat([key]));
         }, options);
         if (options.interpolation) this.interpolator.reset();
       }
-
       var postProcess = options.postProcess || this.options.postProcess;
       var postProcessorNames = typeof postProcess === 'string' ? [postProcess] : postProcess;
-
       if (res !== undefined && res !== null && postProcessorNames && postProcessorNames.length && options.applyPostProcessor !== false) {
-        res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? _objectSpread$2$1({
+        res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? _objectSpread$4$1({
           i18nResolved: resolved
         }, options) : options, this);
       }
-
       return res;
     }
   }, {
     key: "resolve",
     value: function resolve(keys) {
       var _this4 = this;
-
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var found;
       var usedKey;
@@ -1054,65 +929,50 @@ var Translator = function (_EventEmitter) {
       if (typeof keys === 'string') keys = [keys];
       keys.forEach(function (k) {
         if (_this4.isValidLookup(found)) return;
-
         var extracted = _this4.extractFromKey(k, options);
-
         var key = extracted.key;
         usedKey = key;
         var namespaces = extracted.namespaces;
         if (_this4.options.fallbackNS) namespaces = namespaces.concat(_this4.options.fallbackNS);
         var needsPluralHandling = options.count !== undefined && typeof options.count !== 'string';
-
         var needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0 && _this4.pluralResolver.shouldUseIntlApi();
-
         var needsContextHandling = options.context !== undefined && (typeof options.context === 'string' || typeof options.context === 'number') && options.context !== '';
         var codes = options.lngs ? options.lngs : _this4.languageUtils.toResolveHierarchy(options.lng || _this4.language, options.fallbackLng);
         namespaces.forEach(function (ns) {
           if (_this4.isValidLookup(found)) return;
           usedNS = ns;
-
           if (!checkedLoadedFor["".concat(codes[0], "-").concat(ns)] && _this4.utils && _this4.utils.hasLoadedNamespace && !_this4.utils.hasLoadedNamespace(usedNS)) {
             checkedLoadedFor["".concat(codes[0], "-").concat(ns)] = true;
-
             _this4.logger.warn("key \"".concat(usedKey, "\" for languages \"").concat(codes.join(', '), "\" won't get resolved as namespace \"").concat(usedNS, "\" was not yet loaded"), 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
           }
-
           codes.forEach(function (code) {
             if (_this4.isValidLookup(found)) return;
             usedLng = code;
             var finalKeys = [key];
-
             if (_this4.i18nFormat && _this4.i18nFormat.addLookupKeys) {
               _this4.i18nFormat.addLookupKeys(finalKeys, key, code, ns, options);
             } else {
               var pluralSuffix;
               if (needsPluralHandling) pluralSuffix = _this4.pluralResolver.getSuffix(code, options.count, options);
-              var zeroSuffix = '_zero';
-
+              var zeroSuffix = "".concat(_this4.options.pluralSeparator, "zero");
               if (needsPluralHandling) {
                 finalKeys.push(key + pluralSuffix);
-
                 if (needsZeroSuffixLookup) {
                   finalKeys.push(key + zeroSuffix);
                 }
               }
-
               if (needsContextHandling) {
                 var contextKey = "".concat(key).concat(_this4.options.contextSeparator).concat(options.context);
                 finalKeys.push(contextKey);
-
                 if (needsPluralHandling) {
                   finalKeys.push(contextKey + pluralSuffix);
-
                   if (needsZeroSuffixLookup) {
                     finalKeys.push(contextKey + zeroSuffix);
                   }
                 }
               }
             }
-
             var possibleKey;
-
             while (possibleKey = finalKeys.pop()) {
               if (!_this4.isValidLookup(found)) {
                 exactUsedKey = possibleKey;
@@ -1146,33 +1006,27 @@ var Translator = function (_EventEmitter) {
     key: "hasDefaultValue",
     value: function hasDefaultValue(options) {
       var prefix = 'defaultValue';
-
       for (var option in options) {
         if (Object.prototype.hasOwnProperty.call(options, option) && prefix === option.substring(0, prefix.length) && undefined !== options[option]) {
           return true;
         }
       }
-
       return false;
     }
   }]);
-
   return Translator;
 }(EventEmitter);
 
 function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-
 var LanguageUtil = function () {
   function LanguageUtil(options) {
     _classCallCheck$2(this, LanguageUtil);
-
     this.options = options;
     this.supportedLngs = this.options.supportedLngs || false;
     this.logger = baseLogger.create('languageUtils');
   }
-
   _createClass$2(LanguageUtil, [{
     key: "getScriptPartFromCode",
     value: function getScriptPartFromCode(code) {
@@ -1196,7 +1050,6 @@ var LanguageUtil = function () {
       if (typeof code === 'string' && code.indexOf('-') > -1) {
         var specialCases = ['hans', 'hant', 'latn', 'cyrl', 'cans', 'mong', 'arab'];
         var p = code.split('-');
-
         if (this.options.lowerCaseLng) {
           p = p.map(function (part) {
             return part.toLowerCase();
@@ -1212,10 +1065,8 @@ var LanguageUtil = function () {
           if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
           if (specialCases.indexOf(p[2].toLowerCase()) > -1) p[2] = capitalize(p[2].toLowerCase());
         }
-
         return p.join('-');
       }
-
       return this.options.cleanCode || this.options.lowerCaseLng ? code.toLowerCase() : code;
     }
   }, {
@@ -1224,37 +1075,31 @@ var LanguageUtil = function () {
       if (this.options.load === 'languageOnly' || this.options.nonExplicitSupportedLngs) {
         code = this.getLanguagePartFromCode(code);
       }
-
       return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.indexOf(code) > -1;
     }
   }, {
     key: "getBestMatchFromCodes",
     value: function getBestMatchFromCodes(codes) {
       var _this = this;
-
       if (!codes) return null;
       var found;
       codes.forEach(function (code) {
         if (found) return;
-
         var cleanedLng = _this.formatLanguageCode(code);
-
         if (!_this.options.supportedLngs || _this.isSupportedCode(cleanedLng)) found = cleanedLng;
       });
-
       if (!found && this.options.supportedLngs) {
         codes.forEach(function (code) {
           if (found) return;
-
           var lngOnly = _this.getLanguagePartFromCode(code);
-
           if (_this.isSupportedCode(lngOnly)) return found = lngOnly;
           found = _this.options.supportedLngs.find(function (supportedLng) {
+            if (supportedLng === lngOnly) return supportedLng;
+            if (supportedLng.indexOf('-') < 0 && lngOnly.indexOf('-') < 0) return;
             if (supportedLng.indexOf(lngOnly) === 0) return supportedLng;
           });
         });
       }
-
       if (!found) found = this.getFallbackCodes(this.options.fallbackLng)[0];
       return found;
     }
@@ -1277,20 +1122,16 @@ var LanguageUtil = function () {
     key: "toResolveHierarchy",
     value: function toResolveHierarchy(code, fallbackCode) {
       var _this2 = this;
-
       var fallbackCodes = this.getFallbackCodes(fallbackCode || this.options.fallbackLng || [], code);
       var codes = [];
-
       var addCode = function addCode(c) {
         if (!c) return;
-
         if (_this2.isSupportedCode(c)) {
           codes.push(c);
         } else {
           _this2.logger.warn("rejecting language code not found in supportedLngs: ".concat(c));
         }
       };
-
       if (typeof code === 'string' && code.indexOf('-') > -1) {
         if (this.options.load !== 'languageOnly') addCode(this.formatLanguageCode(code));
         if (this.options.load !== 'languageOnly' && this.options.load !== 'currentOnly') addCode(this.getScriptPartFromCode(code));
@@ -1298,14 +1139,12 @@ var LanguageUtil = function () {
       } else if (typeof code === 'string') {
         addCode(this.formatLanguageCode(code));
       }
-
       fallbackCodes.forEach(function (fc) {
         if (codes.indexOf(fc) < 0) addCode(_this2.formatLanguageCode(fc));
       });
       return codes;
     }
   }]);
-
   return LanguageUtil;
 }();
 
@@ -1479,7 +1318,6 @@ var suffixesOrder = {
   many: 4,
   other: 5
 };
-
 function createRules() {
   var rules = {};
   sets.forEach(function (set) {
@@ -1492,25 +1330,19 @@ function createRules() {
   });
   return rules;
 }
-
 var PluralResolver = function () {
   function PluralResolver(languageUtils) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
     _classCallCheck$2(this, PluralResolver);
-
     this.languageUtils = languageUtils;
     this.options = options;
     this.logger = baseLogger.create('pluralResolver');
-
     if ((!this.options.compatibilityJSON || this.options.compatibilityJSON === 'v4') && (typeof Intl === 'undefined' || !Intl.PluralRules)) {
       this.options.compatibilityJSON = 'v3';
       this.logger.error('Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.');
     }
-
     this.rules = createRules();
   }
-
   _createClass$2(PluralResolver, [{
     key: "addRule",
     value: function addRule(lng, obj) {
@@ -1520,7 +1352,6 @@ var PluralResolver = function () {
     key: "getRule",
     value: function getRule(code) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
       if (this.shouldUseIntlApi()) {
         try {
           return new Intl.PluralRules(code, {
@@ -1530,7 +1361,6 @@ var PluralResolver = function () {
           return;
         }
       }
-
       return this.rules[code] || this.rules[this.languageUtils.getLanguagePartFromCode(code)];
     }
   }, {
@@ -1538,11 +1368,9 @@ var PluralResolver = function () {
     value: function needsPlural(code) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var rule = this.getRule(code, options);
-
       if (this.shouldUseIntlApi()) {
         return rule && rule.resolvedOptions().pluralCategories.length > 1;
       }
-
       return rule && rule.numbers.length > 1;
     }
   }, {
@@ -1557,14 +1385,11 @@ var PluralResolver = function () {
     key: "getSuffixes",
     value: function getSuffixes(code) {
       var _this = this;
-
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var rule = this.getRule(code, options);
-
       if (!rule) {
         return [];
       }
-
       if (this.shouldUseIntlApi()) {
         return rule.resolvedOptions().pluralCategories.sort(function (pluralCategory1, pluralCategory2) {
           return suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2];
@@ -1572,7 +1397,6 @@ var PluralResolver = function () {
           return "".concat(_this.options.prepend).concat(pluralCategory);
         });
       }
-
       return rule.numbers.map(function (number) {
         return _this.getSuffix(code, number, options);
       });
@@ -1582,15 +1406,12 @@ var PluralResolver = function () {
     value: function getSuffix(code, count) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var rule = this.getRule(code, options);
-
       if (rule) {
         if (this.shouldUseIntlApi()) {
           return "".concat(this.options.prepend).concat(rule.select(count));
         }
-
         return this.getSuffixRetroCompatible(rule, count);
       }
-
       this.logger.warn("no plural rule found for: ".concat(code));
       return '';
     }
@@ -1598,10 +1419,8 @@ var PluralResolver = function () {
     key: "getSuffixRetroCompatible",
     value: function getSuffixRetroCompatible(rule, count) {
       var _this2 = this;
-
       var idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
       var suffix = rule.numbers[idx];
-
       if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
         if (suffix === 2) {
           suffix = 'plural';
@@ -1609,11 +1428,9 @@ var PluralResolver = function () {
           suffix = '';
         }
       }
-
       var returnSuffix = function returnSuffix() {
         return _this2.options.prepend && suffix.toString() ? _this2.options.prepend + suffix.toString() : suffix.toString();
       };
-
       if (this.options.compatibilityJSON === 'v1') {
         if (suffix === 1) return '';
         if (typeof suffix === 'number') return "_plural_".concat(suffix.toString());
@@ -1623,7 +1440,6 @@ var PluralResolver = function () {
       } else if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
         return returnSuffix();
       }
-
       return this.options.prepend && idx.toString() ? this.options.prepend + idx.toString() : idx.toString();
     }
   }, {
@@ -1632,30 +1448,32 @@ var PluralResolver = function () {
       return !deprecatedJsonVersions.includes(this.options.compatibilityJSON);
     }
   }]);
-
   return PluralResolver;
 }();
 
-function ownKeys$3$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys$3$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$3$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function deepFindWithDefaults(data, defaultData, key) {
+  var keySeparator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '.';
+  var ignoreJSONStructure = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var path = getPathWithDefaults(data, defaultData, key);
+  if (!path && ignoreJSONStructure && typeof key === 'string') {
+    path = deepFind(data, key, keySeparator);
+    if (path === undefined) path = deepFind(defaultData, key, keySeparator);
+  }
+  return path;
+}
 var Interpolator = function () {
   function Interpolator() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     _classCallCheck$2(this, Interpolator);
-
     this.logger = baseLogger.create('interpolator');
     this.options = options;
-
     this.format = options.interpolation && options.interpolation.format || function (value) {
       return value;
     };
-
     this.init(options);
   }
-
   _createClass$2(Interpolator, [{
     key: "init",
     value: function init() {
@@ -1698,32 +1516,27 @@ var Interpolator = function () {
     key: "interpolate",
     value: function interpolate(str, data, lng, options) {
       var _this = this;
-
       var match;
       var value;
       var replaces;
       var defaultData = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {};
-
       function regexSafe(val) {
         return val.replace(/\$/g, '$$$$');
       }
-
       var handleFormat = function handleFormat(key) {
         if (key.indexOf(_this.formatSeparator) < 0) {
-          var path = getPathWithDefaults(data, defaultData, key);
+          var path = deepFindWithDefaults(data, defaultData, key, _this.options.keySeparator, _this.options.ignoreJSONStructure);
           return _this.alwaysFormat ? _this.format(path, undefined, lng, _objectSpread$3$1(_objectSpread$3$1(_objectSpread$3$1({}, options), data), {}, {
             interpolationkey: key
           })) : path;
         }
-
         var p = key.split(_this.formatSeparator);
         var k = p.shift().trim();
         var f = p.join(_this.formatSeparator).trim();
-        return _this.format(getPathWithDefaults(data, defaultData, k), f, lng, _objectSpread$3$1(_objectSpread$3$1(_objectSpread$3$1({}, options), data), {}, {
+        return _this.format(deepFindWithDefaults(data, defaultData, k, _this.options.keySeparator, _this.options.ignoreJSONStructure), f, lng, _objectSpread$3$1(_objectSpread$3$1(_objectSpread$3$1({}, options), data), {}, {
           interpolationkey: k
         }));
       };
-
       this.resetRegExp();
       var missingInterpolationHandler = options && options.missingInterpolationHandler || this.options.missingInterpolationHandler;
       var skipOnVariables = options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
@@ -1740,41 +1553,34 @@ var Interpolator = function () {
       }];
       todos.forEach(function (todo) {
         replaces = 0;
-
         while (match = todo.regex.exec(str)) {
           var matchedVar = match[1].trim();
           value = handleFormat(matchedVar);
-
           if (value === undefined) {
             if (typeof missingInterpolationHandler === 'function') {
               var temp = missingInterpolationHandler(str, match, options);
               value = typeof temp === 'string' ? temp : '';
-            } else if (options && options.hasOwnProperty(matchedVar)) {
+            } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
               value = '';
             } else if (skipOnVariables) {
               value = match[0];
               continue;
             } else {
               _this.logger.warn("missed to pass in variable ".concat(matchedVar, " for interpolating ").concat(str));
-
               value = '';
             }
           } else if (typeof value !== 'string' && !_this.useRawValueToEscape) {
             value = makeString(value);
           }
-
           var safeValue = todo.safeValue(value);
           str = str.replace(match[0], safeValue);
-
           if (skipOnVariables) {
-            todo.regex.lastIndex += safeValue.length;
+            todo.regex.lastIndex += value.length;
             todo.regex.lastIndex -= match[0].length;
           } else {
             todo.regex.lastIndex = 0;
           }
-
           replaces++;
-
           if (replaces >= _this.maxReplaces) {
             break;
           }
@@ -1786,16 +1592,10 @@ var Interpolator = function () {
     key: "nest",
     value: function nest(str, fc) {
       var _this2 = this;
-
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var match;
       var value;
-
-      var clonedOptions = _objectSpread$3$1({}, options);
-
-      clonedOptions.applyPostProcessor = false;
-      delete clonedOptions.defaultValue;
-
+      var clonedOptions;
       function handleHasOptions(key, inheritedOptions) {
         var sep = this.nestingOptionsSeparator;
         if (key.indexOf(sep) < 0) return key;
@@ -1803,8 +1603,11 @@ var Interpolator = function () {
         var optionsString = "{".concat(c[1]);
         key = c[0];
         optionsString = this.interpolate(optionsString, clonedOptions);
-        optionsString = optionsString.replace(/'/g, '"');
-
+        var matchedSingleQuotes = optionsString.match(/'/g);
+        var matchedDoubleQuotes = optionsString.match(/"/g);
+        if (matchedSingleQuotes && matchedSingleQuotes.length % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
+          optionsString = optionsString.replace(/'/g, '"');
+        }
         try {
           clonedOptions = JSON.parse(optionsString);
           if (inheritedOptions) clonedOptions = _objectSpread$3$1(_objectSpread$3$1({}, inheritedOptions), clonedOptions);
@@ -1812,15 +1615,16 @@ var Interpolator = function () {
           this.logger.warn("failed parsing options string in nesting for key ".concat(key), e);
           return "".concat(key).concat(sep).concat(optionsString);
         }
-
         delete clonedOptions.defaultValue;
         return key;
       }
-
       while (match = this.nestingRegexp.exec(str)) {
         var formatters = [];
+        clonedOptions = _objectSpread$3$1({}, options);
+        clonedOptions = clonedOptions.replace && typeof clonedOptions.replace !== 'string' ? clonedOptions.replace : clonedOptions;
+        clonedOptions.applyPostProcessor = false;
+        delete clonedOptions.defaultValue;
         var doReduce = false;
-
         if (match[0].indexOf(this.formatSeparator) !== -1 && !/{.*}/.test(match[1])) {
           var r = match[1].split(this.formatSeparator).map(function (elem) {
             return elem.trim();
@@ -1829,16 +1633,13 @@ var Interpolator = function () {
           formatters = r;
           doReduce = true;
         }
-
         value = fc(handleHasOptions.call(this, match[1].trim(), clonedOptions), clonedOptions);
         if (value && match[0] === str && typeof value !== 'string') return value;
         if (typeof value !== 'string') value = makeString(value);
-
         if (!value) {
           this.logger.warn("missed to resolve ".concat(match[1], " for nesting ").concat(str));
           value = '';
         }
-
         if (doReduce) {
           value = formatters.reduce(function (v, f) {
             return _this2.format(v, f, options.lng, _objectSpread$3$1(_objectSpread$3$1({}, options), {}, {
@@ -1846,31 +1647,24 @@ var Interpolator = function () {
             }));
           }, value.trim());
         }
-
         str = str.replace(match[0], value);
         this.regexp.lastIndex = 0;
       }
-
       return str;
     }
   }]);
-
   return Interpolator;
 }();
 
-function ownKeys$4$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
+function ownKeys$2$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$2$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function parseFormatStr(formatStr) {
   var formatName = formatStr.toLowerCase().trim();
   var formatOptions = {};
-
   if (formatStr.indexOf('(') > -1) {
     var p = formatStr.split('(');
     formatName = p[0].toLowerCase().trim();
     var optStr = p[1].substring(0, p[1].length - 1);
-
     if (formatName === 'currency' && optStr.indexOf(':') < 0) {
       if (!formatOptions.currency) formatOptions.currency = optStr.trim();
     } else if (formatName === 'relativetime' && optStr.indexOf(':') < 0) {
@@ -1879,57 +1673,77 @@ function parseFormatStr(formatStr) {
       var opts = optStr.split(';');
       opts.forEach(function (opt) {
         if (!opt) return;
-
         var _opt$split = opt.split(':'),
-            _opt$split2 = _toArray(_opt$split),
-            key = _opt$split2[0],
-            rest = _opt$split2.slice(1);
-
-        var val = rest.join(':');
-        if (!formatOptions[key.trim()]) formatOptions[key.trim()] = val.trim();
-        if (val.trim() === 'false') formatOptions[key.trim()] = false;
-        if (val.trim() === 'true') formatOptions[key.trim()] = true;
-        if (!isNaN(val.trim())) formatOptions[key.trim()] = parseInt(val.trim(), 10);
+          _opt$split2 = _toArray(_opt$split),
+          key = _opt$split2[0],
+          rest = _opt$split2.slice(1);
+        var val = rest.join(':').trim().replace(/^'+|'+$/g, '');
+        if (!formatOptions[key.trim()]) formatOptions[key.trim()] = val;
+        if (val === 'false') formatOptions[key.trim()] = false;
+        if (val === 'true') formatOptions[key.trim()] = true;
+        if (!isNaN(val)) formatOptions[key.trim()] = parseInt(val, 10);
       });
     }
   }
-
   return {
     formatName: formatName,
     formatOptions: formatOptions
   };
 }
-
+function createCachedFormatter(fn) {
+  var cache = {};
+  return function invokeFormatter(val, lng, options) {
+    var key = lng + JSON.stringify(options);
+    var formatter = cache[key];
+    if (!formatter) {
+      formatter = fn(lng, options);
+      cache[key] = formatter;
+    }
+    return formatter(val);
+  };
+}
 var Formatter = function () {
   function Formatter() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     _classCallCheck$2(this, Formatter);
-
     this.logger = baseLogger.create('formatter');
     this.options = options;
     this.formats = {
-      number: function number(val, lng, options) {
-        return new Intl.NumberFormat(lng, options).format(val);
-      },
-      currency: function currency(val, lng, options) {
-        return new Intl.NumberFormat(lng, _objectSpread$4$1(_objectSpread$4$1({}, options), {}, {
+      number: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.NumberFormat(lng, _objectSpread$2$1({}, opt));
+        return function (val) {
+          return formatter.format(val);
+        };
+      }),
+      currency: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.NumberFormat(lng, _objectSpread$2$1(_objectSpread$2$1({}, opt), {}, {
           style: 'currency'
-        })).format(val);
-      },
-      datetime: function datetime(val, lng, options) {
-        return new Intl.DateTimeFormat(lng, _objectSpread$4$1({}, options)).format(val);
-      },
-      relativetime: function relativetime(val, lng, options) {
-        return new Intl.RelativeTimeFormat(lng, _objectSpread$4$1({}, options)).format(val, options.range || 'day');
-      },
-      list: function list(val, lng, options) {
-        return new Intl.ListFormat(lng, _objectSpread$4$1({}, options)).format(val);
-      }
+        }));
+        return function (val) {
+          return formatter.format(val);
+        };
+      }),
+      datetime: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.DateTimeFormat(lng, _objectSpread$2$1({}, opt));
+        return function (val) {
+          return formatter.format(val);
+        };
+      }),
+      relativetime: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.RelativeTimeFormat(lng, _objectSpread$2$1({}, opt));
+        return function (val) {
+          return formatter.format(val, opt.range || 'day');
+        };
+      }),
+      list: createCachedFormatter(function (lng, opt) {
+        var formatter = new Intl.ListFormat(lng, _objectSpread$2$1({}, opt));
+        return function (val) {
+          return formatter.format(val);
+        };
+      })
     };
     this.init(options);
   }
-
   _createClass$2(Formatter, [{
     key: "init",
     value: function init(services) {
@@ -1944,137 +1758,121 @@ var Formatter = function () {
     value: function add(name, fc) {
       this.formats[name.toLowerCase().trim()] = fc;
     }
+  }, {
+    key: "addCached",
+    value: function addCached(name, fc) {
+      this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
+    }
   }, {
     key: "format",
-    value: function format(value, _format, lng, options) {
+    value: function format(value, _format, lng) {
       var _this = this;
-
+      var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       var formats = _format.split(this.formatSeparator);
-
       var result = formats.reduce(function (mem, f) {
         var _parseFormatStr = parseFormatStr(f),
-            formatName = _parseFormatStr.formatName,
-            formatOptions = _parseFormatStr.formatOptions;
-
+          formatName = _parseFormatStr.formatName,
+          formatOptions = _parseFormatStr.formatOptions;
         if (_this.formats[formatName]) {
           var formatted = mem;
-
           try {
             var valOptions = options && options.formatParams && options.formatParams[options.interpolationkey] || {};
             var l = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
-            formatted = _this.formats[formatName](mem, l, _objectSpread$4$1(_objectSpread$4$1(_objectSpread$4$1({}, formatOptions), options), valOptions));
+            formatted = _this.formats[formatName](mem, l, _objectSpread$2$1(_objectSpread$2$1(_objectSpread$2$1({}, formatOptions), options), valOptions));
           } catch (error) {
             _this.logger.warn(error);
           }
-
           return formatted;
         } else {
           _this.logger.warn("there was no format function for ".concat(formatName));
         }
-
         return mem;
       }, value);
       return result;
     }
   }]);
-
   return Formatter;
 }();
 
-function ownKeys$5$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$5$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function remove(arr, what) {
-  var found = arr.indexOf(what);
-
-  while (found !== -1) {
-    arr.splice(found, 1);
-    found = arr.indexOf(what);
+function ownKeys$1$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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function removePending(q, name) {
+  if (q.pending[name] !== undefined) {
+    delete q.pending[name];
+    q.pendingCount--;
   }
 }
-
 var Connector = function (_EventEmitter) {
   _inherits(Connector, _EventEmitter);
-
-  var _super = _createSuper$2(Connector);
-
+  var _super = _createSuper$1(Connector);
   function Connector(backend, store, services) {
     var _this;
-
     var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
     _classCallCheck$2(this, Connector);
-
     _this = _super.call(this);
-
     if (isIE10) {
       EventEmitter.call(_assertThisInitialized(_this));
     }
-
     _this.backend = backend;
     _this.store = store;
     _this.services = services;
     _this.languageUtils = services.languageUtils;
     _this.options = options;
     _this.logger = baseLogger.create('backendConnector');
+    _this.waitingReads = [];
+    _this.maxParallelReads = options.maxParallelReads || 10;
+    _this.readingCalls = 0;
+    _this.maxRetries = options.maxRetries >= 0 ? options.maxRetries : 5;
+    _this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
     _this.state = {};
     _this.queue = [];
-
     if (_this.backend && _this.backend.init) {
       _this.backend.init(services, options.backend, options);
     }
-
     return _this;
   }
-
   _createClass$2(Connector, [{
     key: "queueLoad",
     value: function queueLoad(languages, namespaces, options, callback) {
       var _this2 = this;
-
-      var toLoad = [];
-      var pending = [];
-      var toLoadLanguages = [];
-      var toLoadNamespaces = [];
+      var toLoad = {};
+      var pending = {};
+      var toLoadLanguages = {};
+      var toLoadNamespaces = {};
       languages.forEach(function (lng) {
         var hasAllNamespaces = true;
         namespaces.forEach(function (ns) {
           var name = "".concat(lng, "|").concat(ns);
-
           if (!options.reload && _this2.store.hasResourceBundle(lng, ns)) {
             _this2.state[name] = 2;
           } else if (_this2.state[name] < 0) ; else if (_this2.state[name] === 1) {
-            if (pending.indexOf(name) < 0) pending.push(name);
+            if (pending[name] === undefined) pending[name] = true;
           } else {
             _this2.state[name] = 1;
             hasAllNamespaces = false;
-            if (pending.indexOf(name) < 0) pending.push(name);
-            if (toLoad.indexOf(name) < 0) toLoad.push(name);
-            if (toLoadNamespaces.indexOf(ns) < 0) toLoadNamespaces.push(ns);
+            if (pending[name] === undefined) pending[name] = true;
+            if (toLoad[name] === undefined) toLoad[name] = true;
+            if (toLoadNamespaces[ns] === undefined) toLoadNamespaces[ns] = true;
           }
         });
-        if (!hasAllNamespaces) toLoadLanguages.push(lng);
+        if (!hasAllNamespaces) toLoadLanguages[lng] = true;
       });
-
-      if (toLoad.length || pending.length) {
+      if (Object.keys(toLoad).length || Object.keys(pending).length) {
         this.queue.push({
           pending: pending,
+          pendingCount: Object.keys(pending).length,
           loaded: {},
           errors: [],
           callback: callback
         });
       }
-
       return {
-        toLoad: toLoad,
-        pending: pending,
-        toLoadLanguages: toLoadLanguages,
-        toLoadNamespaces: toLoadNamespaces
+        toLoad: Object.keys(toLoad),
+        pending: Object.keys(pending),
+        toLoadLanguages: Object.keys(toLoadLanguages),
+        toLoadNamespaces: Object.keys(toLoadNamespaces)
       };
     }
   }, {
@@ -2084,30 +1882,26 @@ var Connector = function (_EventEmitter) {
       var lng = s[0];
       var ns = s[1];
       if (err) this.emit('failedLoading', lng, ns, err);
-
       if (data) {
         this.store.addResourceBundle(lng, ns, data);
       }
-
       this.state[name] = err ? -1 : 2;
       var loaded = {};
       this.queue.forEach(function (q) {
         pushPath(q.loaded, [lng], ns);
-        remove(q.pending, name);
+        removePending(q, name);
         if (err) q.errors.push(err);
-
-        if (q.pending.length === 0 && !q.done) {
+        if (q.pendingCount === 0 && !q.done) {
           Object.keys(q.loaded).forEach(function (l) {
-            if (!loaded[l]) loaded[l] = [];
-
-            if (q.loaded[l].length) {
-              q.loaded[l].forEach(function (ns) {
-                if (loaded[l].indexOf(ns) < 0) loaded[l].push(ns);
+            if (!loaded[l]) loaded[l] = {};
+            var loadedKeys = q.loaded[l];
+            if (loadedKeys.length) {
+              loadedKeys.forEach(function (n) {
+                if (loaded[l][n] === undefined) loaded[l][n] = true;
               });
             }
           });
           q.done = true;
-
           if (q.errors.length) {
             q.callback(q.errors);
           } else {
@@ -2124,44 +1918,71 @@ var Connector = function (_EventEmitter) {
     key: "read",
     value: function read(lng, ns, fcName) {
       var _this3 = this;
-
       var tried = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 350;
+      var wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.retryTimeout;
       var callback = arguments.length > 5 ? arguments[5] : undefined;
       if (!lng.length) return callback(null, {});
-      return this.backend[fcName](lng, ns, function (err, data) {
-        if (err && data && tried < 5) {
+      if (this.readingCalls >= this.maxParallelReads) {
+        this.waitingReads.push({
+          lng: lng,
+          ns: ns,
+          fcName: fcName,
+          tried: tried,
+          wait: wait,
+          callback: callback
+        });
+        return;
+      }
+      this.readingCalls++;
+      var resolver = function resolver(err, data) {
+        _this3.readingCalls--;
+        if (_this3.waitingReads.length > 0) {
+          var next = _this3.waitingReads.shift();
+          _this3.read(next.lng, next.ns, next.fcName, next.tried, next.wait, next.callback);
+        }
+        if (err && data && tried < _this3.maxRetries) {
           setTimeout(function () {
             _this3.read.call(_this3, lng, ns, fcName, tried + 1, wait * 2, callback);
           }, wait);
           return;
         }
-
         callback(err, data);
-      });
+      };
+      var fc = this.backend[fcName].bind(this.backend);
+      if (fc.length === 2) {
+        try {
+          var r = fc(lng, ns);
+          if (r && typeof r.then === 'function') {
+            r.then(function (data) {
+              return resolver(null, data);
+            })["catch"](resolver);
+          } else {
+            resolver(null, r);
+          }
+        } catch (err) {
+          resolver(err);
+        }
+        return;
+      }
+      return fc(lng, ns, resolver);
     }
   }, {
     key: "prepareLoading",
     value: function prepareLoading(languages, namespaces) {
       var _this4 = this;
-
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var callback = arguments.length > 3 ? arguments[3] : undefined;
-
       if (!this.backend) {
         this.logger.warn('No backend was added via i18next.use. Will not load resources.');
         return callback && callback();
       }
-
       if (typeof languages === 'string') languages = this.languageUtils.toResolveHierarchy(languages);
       if (typeof namespaces === 'string') namespaces = [namespaces];
       var toLoad = this.queueLoad(languages, namespaces, options, callback);
-
       if (!toLoad.toLoad.length) {
         if (!toLoad.pending.length) callback();
         return null;
       }
-
       toLoad.toLoad.forEach(function (name) {
         _this4.loadOne(name);
       });
@@ -2182,7 +2003,6 @@ var Connector = function (_EventEmitter) {
     key: "loadOne",
     value: function loadOne(name) {
       var _this5 = this;
-
       var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
       var s = name.split('|');
       var lng = s[0];
@@ -2190,7 +2010,6 @@ var Connector = function (_EventEmitter) {
       this.read(lng, ns, 'read', undefined, undefined, function (err, data) {
         if (err) _this5.logger.warn("".concat(prefix, "loading namespace ").concat(ns, " for language ").concat(lng, " failed"), err);
         if (!err && data) _this5.logger.log("".concat(prefix, "loaded namespace ").concat(ns, " for language ").concat(lng), data);
-
         _this5.loaded(name, err, data);
       });
     }
@@ -2198,25 +2017,43 @@ var Connector = function (_EventEmitter) {
     key: "saveMissing",
     value: function saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
       var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-
+      var clb = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : function () {};
       if (this.services.utils && this.services.utils.hasLoadedNamespace && !this.services.utils.hasLoadedNamespace(namespace)) {
         this.logger.warn("did not save key \"".concat(key, "\" as the namespace \"").concat(namespace, "\" was not yet loaded"), 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
         return;
       }
-
       if (key === undefined || key === null || key === '') return;
-
       if (this.backend && this.backend.create) {
-        this.backend.create(languages, namespace, key, fallbackValue, null, _objectSpread$5$1(_objectSpread$5$1({}, options), {}, {
+        var opts = _objectSpread$1$1(_objectSpread$1$1({}, options), {}, {
           isUpdate: isUpdate
-        }));
+        });
+        var fc = this.backend.create.bind(this.backend);
+        if (fc.length < 6) {
+          try {
+            var r;
+            if (fc.length === 5) {
+              r = fc(languages, namespace, key, fallbackValue, opts);
+            } else {
+              r = fc(languages, namespace, key, fallbackValue);
+            }
+            if (r && typeof r.then === 'function') {
+              r.then(function (data) {
+                return clb(null, data);
+              })["catch"](clb);
+            } else {
+              clb(null, r);
+            }
+          } catch (err) {
+            clb(err);
+          }
+        } else {
+          fc(languages, namespace, key, fallbackValue, clb, opts);
+        }
       }
-
       if (!languages || !languages[0]) return;
       this.store.addResource(languages[0], namespace, key, fallbackValue);
     }
   }]);
-
   return Connector;
 }(EventEmitter);
 
@@ -2256,17 +2093,15 @@ function get() {
     appendNamespaceToCIMode: false,
     overloadTranslationOptionHandler: function handle(args) {
       var ret = {};
-      if (_typeof$2(args[1]) === 'object') ret = args[1];
+      if (_typeof$3(args[1]) === 'object') ret = args[1];
       if (typeof args[1] === 'string') ret.defaultValue = args[1];
       if (typeof args[2] === 'string') ret.tDescription = args[2];
-
-      if (_typeof$2(args[2]) === 'object' || _typeof$2(args[3]) === 'object') {
+      if (_typeof$3(args[2]) === 'object' || _typeof$3(args[3]) === 'object') {
         var options = args[3] || args[2];
         Object.keys(options).forEach(function (key) {
           ret[key] = options[key];
         });
       }
-
       return ret;
     },
     interpolation: {
@@ -2290,24 +2125,17 @@ function transformOptions(options) {
   if (typeof options.ns === 'string') options.ns = [options.ns];
   if (typeof options.fallbackLng === 'string') options.fallbackLng = [options.fallbackLng];
   if (typeof options.fallbackNS === 'string') options.fallbackNS = [options.fallbackNS];
-
   if (options.supportedLngs && options.supportedLngs.indexOf('cimode') < 0) {
     options.supportedLngs = options.supportedLngs.concat(['cimode']);
   }
-
   return options;
 }
 
-function ownKeys$6$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+function ownKeys$g(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop() {}
-
 function bindMemberFunctions(inst) {
   var mems = Object.getOwnPropertyNames(Object.getPrototypeOf(inst));
   mems.forEach(function (mem) {
@@ -2316,26 +2144,18 @@ function bindMemberFunctions(inst) {
     }
   });
 }
-
 var I18n = function (_EventEmitter) {
   _inherits(I18n, _EventEmitter);
-
-  var _super = _createSuper$3(I18n);
-
+  var _super = _createSuper(I18n);
   function I18n() {
     var _this;
-
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var callback = arguments.length > 1 ? arguments[1] : undefined;
-
     _classCallCheck$2(this, I18n);
-
     _this = _super.call(this);
-
     if (isIE10) {
       EventEmitter.call(_assertThisInitialized(_this));
     }
-
     _this.options = transformOptions(options);
     _this.services = {};
     _this.logger = baseLogger;
@@ -2343,79 +2163,62 @@ var I18n = function (_EventEmitter) {
       external: []
     };
     bindMemberFunctions(_assertThisInitialized(_this));
-
     if (callback && !_this.isInitialized && !options.isClone) {
       if (!_this.options.initImmediate) {
         _this.init(options, callback);
-
         return _possibleConstructorReturn(_this, _assertThisInitialized(_this));
       }
-
       setTimeout(function () {
         _this.init(options, callback);
       }, 0);
     }
-
     return _this;
   }
-
   _createClass$2(I18n, [{
     key: "init",
     value: function init() {
       var _this2 = this;
-
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 ? arguments[1] : undefined;
-
       if (typeof options === 'function') {
         callback = options;
         options = {};
       }
-
-      if (!options.defaultNS && options.ns) {
+      if (!options.defaultNS && options.defaultNS !== false && options.ns) {
         if (typeof options.ns === 'string') {
           options.defaultNS = options.ns;
         } else if (options.ns.indexOf('translation') < 0) {
           options.defaultNS = options.ns[0];
         }
       }
-
       var defOpts = get();
-      this.options = _objectSpread$6$1(_objectSpread$6$1(_objectSpread$6$1({}, defOpts), this.options), transformOptions(options));
-
+      this.options = _objectSpread$g(_objectSpread$g(_objectSpread$g({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$6$1(_objectSpread$6$1({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$g(_objectSpread$g({}, defOpts.interpolation), this.options.interpolation);
       }
-
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
       }
-
       if (options.nsSeparator !== undefined) {
         this.options.userDefinedNsSeparator = options.nsSeparator;
       }
-
       function createClassOnDemand(ClassOrObject) {
         if (!ClassOrObject) return null;
         if (typeof ClassOrObject === 'function') return new ClassOrObject();
         return ClassOrObject;
       }
-
       if (!this.options.isClone) {
         if (this.modules.logger) {
           baseLogger.init(createClassOnDemand(this.modules.logger), this.options);
         } else {
           baseLogger.init(null, this.options);
         }
-
         var formatter;
-
         if (this.modules.formatter) {
           formatter = this.modules.formatter;
         } else if (typeof Intl !== 'undefined') {
           formatter = Formatter;
         }
-
         var lu = new LanguageUtil(this.options);
         this.store = new ResourceStore(this.options.resources, this.options);
         var s = this.services;
@@ -2427,13 +2230,11 @@ var I18n = function (_EventEmitter) {
           compatibilityJSON: this.options.compatibilityJSON,
           simplifyPluralSuffix: this.options.simplifyPluralSuffix
         });
-
         if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
           s.formatter = createClassOnDemand(formatter);
           s.formatter.init(s, this.options);
           this.options.interpolation.format = s.formatter.format.bind(s.formatter);
         }
-
         s.interpolator = new Interpolator(this.options);
         s.utils = {
           hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
@@ -2443,50 +2244,40 @@ var I18n = function (_EventEmitter) {
           for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
             args[_key - 1] = arguments[_key];
           }
-
           _this2.emit.apply(_this2, [event].concat(args));
         });
-
         if (this.modules.languageDetector) {
           s.languageDetector = createClassOnDemand(this.modules.languageDetector);
-          s.languageDetector.init(s, this.options.detection, this.options);
+          if (s.languageDetector.init) s.languageDetector.init(s, this.options.detection, this.options);
         }
-
         if (this.modules.i18nFormat) {
           s.i18nFormat = createClassOnDemand(this.modules.i18nFormat);
           if (s.i18nFormat.init) s.i18nFormat.init(this);
         }
-
         this.translator = new Translator(this.services, this.options);
         this.translator.on('*', function (event) {
           for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
             args[_key2 - 1] = arguments[_key2];
           }
-
           _this2.emit.apply(_this2, [event].concat(args));
         });
         this.modules.external.forEach(function (m) {
           if (m.init) m.init(_this2);
         });
       }
-
       this.format = this.options.interpolation.format;
       if (!callback) callback = noop;
-
       if (this.options.fallbackLng && !this.services.languageDetector && !this.options.lng) {
         var codes = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
         if (codes.length > 0 && codes[0] !== 'dev') this.options.lng = codes[0];
       }
-
       if (!this.services.languageDetector && !this.options.lng) {
         this.logger.warn('init: no languageDetector is used and no lng is defined');
       }
-
       var storeApi = ['getResource', 'hasResourceBundle', 'getResourceBundle', 'getDataByLanguage'];
       storeApi.forEach(function (fcName) {
         _this2[fcName] = function () {
           var _this2$store;
-
           return (_this2$store = _this2.store)[fcName].apply(_this2$store, arguments);
         };
       });
@@ -2494,63 +2285,48 @@ var I18n = function (_EventEmitter) {
       storeApiChained.forEach(function (fcName) {
         _this2[fcName] = function () {
           var _this2$store2;
-
           (_this2$store2 = _this2.store)[fcName].apply(_this2$store2, arguments);
-
           return _this2;
         };
       });
       var deferred = defer();
-
       var load = function load() {
         var finish = function finish(err, t) {
           if (_this2.isInitialized && !_this2.initializedStoreOnce) _this2.logger.warn('init: i18next is already initialized. You should call init just once!');
           _this2.isInitialized = true;
           if (!_this2.options.isClone) _this2.logger.log('initialized', _this2.options);
-
           _this2.emit('initialized', _this2.options);
-
           deferred.resolve(t);
           callback(err, t);
         };
-
         if (_this2.languages && _this2.options.compatibilityAPI !== 'v1' && !_this2.isInitialized) return finish(null, _this2.t.bind(_this2));
-
         _this2.changeLanguage(_this2.options.lng, finish);
       };
-
       if (this.options.resources || !this.options.initImmediate) {
         load();
       } else {
         setTimeout(load, 0);
       }
-
       return deferred;
     }
   }, {
     key: "loadResources",
     value: function loadResources(language) {
       var _this3 = this;
-
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
       var usedCallback = callback;
       var usedLng = typeof language === 'string' ? language : this.language;
       if (typeof language === 'function') usedCallback = language;
-
       if (!this.options.resources || this.options.partialBundledLanguages) {
         if (usedLng && usedLng.toLowerCase() === 'cimode') return usedCallback();
         var toLoad = [];
-
         var append = function append(lng) {
           if (!lng) return;
-
           var lngs = _this3.services.languageUtils.toResolveHierarchy(lng);
-
           lngs.forEach(function (l) {
             if (toLoad.indexOf(l) < 0) toLoad.push(l);
           });
         };
-
         if (!usedLng) {
           var fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
           fallbacks.forEach(function (l) {
@@ -2559,13 +2335,11 @@ var I18n = function (_EventEmitter) {
         } else {
           append(usedLng);
         }
-
         if (this.options.preload) {
           this.options.preload.forEach(function (l) {
             return append(l);
           });
         }
-
         this.services.backendConnector.load(toLoad, this.options.ns, function (e) {
           if (!e && !_this3.resolvedLanguage && _this3.language) _this3.setResolvedLanguage(_this3.language);
           usedCallback(e);
@@ -2592,35 +2366,27 @@ var I18n = function (_EventEmitter) {
     value: function use(module) {
       if (!module) throw new Error('You are passing an undefined module! Please check the object you are passing to i18next.use()');
       if (!module.type) throw new Error('You are passing a wrong module! Please check the object you are passing to i18next.use()');
-
       if (module.type === 'backend') {
         this.modules.backend = module;
       }
-
       if (module.type === 'logger' || module.log && module.warn && module.error) {
         this.modules.logger = module;
       }
-
       if (module.type === 'languageDetector') {
         this.modules.languageDetector = module;
       }
-
       if (module.type === 'i18nFormat') {
         this.modules.i18nFormat = module;
       }
-
       if (module.type === 'postProcessor') {
         postProcessor.addPostProcessor(module);
       }
-
       if (module.type === 'formatter') {
         this.modules.formatter = module;
       }
-
       if (module.type === '3rdParty') {
         this.modules.external.push(module);
       }
-
       return this;
     }
   }, {
@@ -2628,11 +2394,9 @@ var I18n = function (_EventEmitter) {
     value: function setResolvedLanguage(l) {
       if (!l || !this.languages) return;
       if (['cimode', 'dev'].indexOf(l) > -1) return;
-
       for (var li = 0; li < this.languages.length; li++) {
         var lngInLngs = this.languages[li];
         if (['cimode', 'dev'].indexOf(lngInLngs) > -1) continue;
-
         if (this.store.hasLanguageSomeTranslations(lngInLngs)) {
           this.resolvedLanguage = lngInLngs;
           break;
@@ -2643,34 +2407,25 @@ var I18n = function (_EventEmitter) {
     key: "changeLanguage",
     value: function changeLanguage(lng, callback) {
       var _this4 = this;
-
       this.isLanguageChangingTo = lng;
       var deferred = defer();
       this.emit('languageChanging', lng);
-
       var setLngProps = function setLngProps(l) {
         _this4.language = l;
         _this4.languages = _this4.services.languageUtils.toResolveHierarchy(l);
         _this4.resolvedLanguage = undefined;
-
         _this4.setResolvedLanguage(l);
       };
-
       var done = function done(err, l) {
         if (l) {
           setLngProps(l);
-
           _this4.translator.changeLanguage(l);
-
           _this4.isLanguageChangingTo = undefined;
-
           _this4.emit('languageChanged', l);
-
           _this4.logger.log('languageChanged', l);
         } else {
           _this4.isLanguageChangingTo = undefined;
         }
-
         deferred.resolve(function () {
           return _this4.t.apply(_this4, arguments);
         });
@@ -2678,67 +2433,67 @@ var I18n = function (_EventEmitter) {
           return _this4.t.apply(_this4, arguments);
         });
       };
-
       var setLng = function setLng(lngs) {
         if (!lng && !lngs && _this4.services.languageDetector) lngs = [];
         var l = typeof lngs === 'string' ? lngs : _this4.services.languageUtils.getBestMatchFromCodes(lngs);
-
         if (l) {
           if (!_this4.language) {
             setLngProps(l);
           }
-
           if (!_this4.translator.language) _this4.translator.changeLanguage(l);
-          if (_this4.services.languageDetector) _this4.services.languageDetector.cacheUserLanguage(l);
+          if (_this4.services.languageDetector && _this4.services.languageDetector.cacheUserLanguage) _this4.services.languageDetector.cacheUserLanguage(l);
         }
-
         _this4.loadResources(l, function (err) {
           done(err, l);
         });
       };
-
       if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
         setLng(this.services.languageDetector.detect());
       } else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
-        this.services.languageDetector.detect(setLng);
+        if (this.services.languageDetector.detect.length === 0) {
+          this.services.languageDetector.detect().then(setLng);
+        } else {
+          this.services.languageDetector.detect(setLng);
+        }
       } else {
         setLng(lng);
       }
-
       return deferred;
     }
   }, {
     key: "getFixedT",
     value: function getFixedT(lng, ns, keyPrefix) {
       var _this5 = this;
-
       var fixedT = function fixedT(key, opts) {
         var options;
-
-        if (_typeof$2(opts) !== 'object') {
+        if (_typeof$3(opts) !== 'object') {
           for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
             rest[_key3 - 2] = arguments[_key3];
           }
-
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$6$1({}, opts);
+          options = _objectSpread$g({}, opts);
         }
-
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
         options.ns = options.ns || fixedT.ns;
+        options.keyPrefix = options.keyPrefix || keyPrefix || fixedT.keyPrefix;
         var keySeparator = _this5.options.keySeparator || '.';
-        var resultKey = keyPrefix ? "".concat(keyPrefix).concat(keySeparator).concat(key) : key;
+        var resultKey;
+        if (options.keyPrefix && Array.isArray(key)) {
+          resultKey = key.map(function (k) {
+            return "".concat(options.keyPrefix).concat(keySeparator).concat(k);
+          });
+        } else {
+          resultKey = options.keyPrefix ? "".concat(options.keyPrefix).concat(keySeparator).concat(key) : key;
+        }
         return _this5.t(resultKey, options);
       };
-
       if (typeof lng === 'string') {
         fixedT.lng = lng;
       } else {
         fixedT.lngs = lng;
       }
-
       fixedT.ns = ns;
       fixedT.keyPrefix = keyPrefix;
       return fixedT;
@@ -2747,14 +2502,12 @@ var I18n = function (_EventEmitter) {
     key: "t",
     value: function t() {
       var _this$translator;
-
       return this.translator && (_this$translator = this.translator).translate.apply(_this$translator, arguments);
     }
   }, {
     key: "exists",
     value: function exists() {
       var _this$translator2;
-
       return this.translator && (_this$translator2 = this.translator).exists.apply(_this$translator2, arguments);
     }
   }, {
@@ -2766,35 +2519,27 @@ var I18n = function (_EventEmitter) {
     key: "hasLoadedNamespace",
     value: function hasLoadedNamespace(ns) {
       var _this6 = this;
-
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
       if (!this.isInitialized) {
         this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
         return false;
       }
-
       if (!this.languages || !this.languages.length) {
         this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
         return false;
       }
-
-      var lng = this.resolvedLanguage || this.languages[0];
+      var lng = options.lng || this.resolvedLanguage || this.languages[0];
       var fallbackLng = this.options ? this.options.fallbackLng : false;
       var lastLng = this.languages[this.languages.length - 1];
       if (lng.toLowerCase() === 'cimode') return true;
-
       var loadNotPending = function loadNotPending(l, n) {
         var loadState = _this6.services.backendConnector.state["".concat(l, "|").concat(n)];
-
         return loadState === -1 || loadState === 2;
       };
-
       if (options.precheck) {
         var preResult = options.precheck(this, loadNotPending);
         if (preResult !== undefined) return preResult;
       }
-
       if (this.hasResourceBundle(lng, ns)) return true;
       if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
       if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
@@ -2804,14 +2549,11 @@ var I18n = function (_EventEmitter) {
     key: "loadNamespaces",
     value: function loadNamespaces(ns, callback) {
       var _this7 = this;
-
       var deferred = defer();
-
       if (!this.options.ns) {
-        callback && callback();
+        if (callback) callback();
         return Promise.resolve();
       }
-
       if (typeof ns === 'string') ns = [ns];
       ns.forEach(function (n) {
         if (_this7.options.ns.indexOf(n) < 0) _this7.options.ns.push(n);
@@ -2831,12 +2573,10 @@ var I18n = function (_EventEmitter) {
       var newLngs = lngs.filter(function (lng) {
         return preloaded.indexOf(lng) < 0;
       });
-
       if (!newLngs.length) {
         if (callback) callback();
         return Promise.resolve();
       }
-
       this.options.preload = preloaded.concat(newLngs);
       this.loadResources(function (err) {
         deferred.resolve();
@@ -2850,26 +2590,27 @@ var I18n = function (_EventEmitter) {
       if (!lng) lng = this.resolvedLanguage || (this.languages && this.languages.length > 0 ? this.languages[0] : this.language);
       if (!lng) return 'rtl';
       var rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
-      return rtlLngs.indexOf(this.services.languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
+      var languageUtils = this.services && this.services.languageUtils || new LanguageUtil(get());
+      return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
     }
   }, {
     key: "cloneInstance",
     value: function cloneInstance() {
       var _this8 = this;
-
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-
-      var mergedOptions = _objectSpread$6$1(_objectSpread$6$1(_objectSpread$6$1({}, this.options), options), {
+      var mergedOptions = _objectSpread$g(_objectSpread$g(_objectSpread$g({}, this.options), options), {
         isClone: true
       });
-
       var clone = new I18n(mergedOptions);
+      if (options.debug !== undefined || options.prefix !== undefined) {
+        clone.logger = clone.logger.clone(options);
+      }
       var membersToCopy = ['store', 'services', 'language'];
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$6$1({}, this.services);
+      clone.services = _objectSpread$g({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -2878,7 +2619,6 @@ var I18n = function (_EventEmitter) {
         for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
           args[_key4 - 1] = arguments[_key4];
         }
-
         clone.emit.apply(clone, [event].concat(args));
       });
       clone.init(mergedOptions, callback);
@@ -2900,20 +2640,18 @@ var I18n = function (_EventEmitter) {
       };
     }
   }]);
-
   return I18n;
 }(EventEmitter);
-
-_defineProperty$1(I18n, "createInstance", function () {
+_defineProperty$2(I18n, "createInstance", function () {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var callback = arguments.length > 1 ? arguments[1] : undefined;
   return new I18n(options, callback);
 });
-
 var instance = I18n.createInstance();
 instance.createInstance = I18n.createInstance;
 
 instance.createInstance;
+instance.dir;
 instance.init;
 instance.loadResources;
 instance.reloadResources;
@@ -2933,30 +2671,30 @@ function _classCallCheck$1(instance, Constructor) {
   }
 }
 
-function _typeof$1(obj) {
+function _typeof$2(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+  return _typeof$2 = "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$1(obj);
+  }, _typeof$2(obj);
 }
 
-function _toPrimitive$1(input, hint) {
-  if (_typeof$1(input) !== "object" || input === null) return input;
+function _toPrimitive$2(input, hint) {
+  if (_typeof$2(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$1(res) !== "object") return res;
+    if (_typeof$2(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
 }
 
-function _toPropertyKey$1(arg) {
-  var key = _toPrimitive$1(arg, "string");
-  return _typeof$1(key) === "symbol" ? key : String(key);
+function _toPropertyKey$2(arg) {
+  var key = _toPrimitive$2(arg, "string");
+  return _typeof$2(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperties$1(target, props) {
@@ -2965,7 +2703,7 @@ function _defineProperties$1(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey$1(descriptor.key), descriptor);
+    Object.defineProperty(target, _toPropertyKey$2(descriptor.key), descriptor);
   }
 }
 function _createClass$1(Constructor, protoProps, staticProps) {
@@ -3326,7 +3064,7 @@ var Browser = /*#__PURE__*/function () {
 }();
 Browser.type = 'languageDetector';
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -3339,9 +3077,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -3355,34 +3093,34 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-function _typeof(obj) {
+function _typeof$1(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+  return _typeof$1 = "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);
+  }, _typeof$1(obj);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
+function _toPrimitive$1(input, hint) {
+  if (_typeof$1(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+    if (_typeof$1(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function _toPropertyKey$1(arg) {
+  var key = _toPrimitive$1(arg, "string");
+  return _typeof$1(key) === "symbol" ? key : String(key);
 }
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+function _defineProperty$1(obj, key, value) {
+  key = _toPropertyKey$1(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -3476,7 +3214,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, _toPropertyKey$1(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -3488,9 +3226,9 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -3504,7 +3242,7 @@ var i18nInstance;
 var I18nContext = React.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$e(_objectSpread$e({}, defaultOptions), options);
+  defaultOptions = _objectSpread$f(_objectSpread$f({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -3628,12 +3366,12 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded = ["format"],
+var _excluded$2 = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -3659,7 +3397,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$d({}, target);
+  var newTarget = _objectSpread$e({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -3692,9 +3430,9 @@ function nodesToString(children, i18nOptions) {
       }
     } else if (child === null) {
       warn("Trans: the passed in value is invalid - seems you passed in a null child.");
-    } else if (_typeof(child) === 'object') {
+    } else if (_typeof$1(child) === 'object') {
       var format = child.format,
-          clone = _objectWithoutProperties(child, _excluded);
+          clone = _objectWithoutProperties$1(child, _excluded$2);
 
       var keys = Object.keys(clone);
 
@@ -3722,14 +3460,14 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
     var childrenArray = getAsArray(childs);
     childrenArray.forEach(function (child) {
       if (typeof child === 'string') return;
-      if (hasChildren(child)) getData(getChildren(child));else if (_typeof(child) === 'object' && !React.isValidElement(child)) Object.assign(data, child);
+      if (hasChildren(child)) getData(getChildren(child));else if (_typeof$1(child) === 'object' && !React.isValidElement(child)) Object.assign(data, child);
     });
   }
 
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$d(_objectSpread$d({}, data), combinedTOpts);
+  var opts = _objectSpread$e(_objectSpread$e({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -3739,7 +3477,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+    mem.push(React.cloneElement(child, _objectSpread$e(_objectSpread$e({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -3759,8 +3497,8 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
         }, tmp) : tmp;
         var isElement = React.isValidElement(child);
         var isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
-        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof(child) === 'object' && child.dummy && !isElement;
-        var isKnownComponent = _typeof(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$1(child) === 'object' && child.dummy && !isElement;
+        var isKnownComponent = _typeof$1(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
 
         if (typeof child === 'string') {
           var value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
@@ -3771,7 +3509,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$e(_objectSpread$e({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -3798,15 +3536,15 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
             mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
           }
-        } else if (_typeof(child) === 'object' && !isElement) {
+        } else if (_typeof$1(child) === 'object' && !isElement) {
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$e(_objectSpread$e({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$e(_objectSpread$e({}, child.props), {}, {
             key: i
           })));
         }
@@ -3850,7 +3588,7 @@ function Trans(_ref) {
       i18nFromProps = _ref.i18n,
       tFromProps = _ref.t,
       shouldUnescape = _ref.shouldUnescape,
-      additionalProps = _objectWithoutProperties(_ref, _excluded2);
+      additionalProps = _objectWithoutProperties$1(_ref, _excluded2);
 
   var _ref2 = useContext(I18nContext) || {},
       i18nFromContext = _ref2.i18n,
@@ -3869,7 +3607,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$d(_objectSpread$d({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$e(_objectSpread$e({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -3877,13 +3615,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$d(_objectSpread$d({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$e(_objectSpread$e({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$e(_objectSpread$e(_objectSpread$e(_objectSpread$e({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -3896,7 +3634,7 @@ function Trans(_ref) {
   return useAsParent ? React.createElement(useAsParent, additionalProps, content) : content;
 }
 
-function _arrayWithHoles(arr) {
+function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
@@ -3928,32 +3666,32 @@ function _iterableToArrayLimit$1(arr, i) {
   }
 }
 
-function _arrayLikeToArray(arr, len) {
+function _arrayLikeToArray$1(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
 
-function _unsupportedIterableToArray(o, minLen) {
+function _unsupportedIterableToArray$1(o, minLen) {
   if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
   var n = Object.prototype.toString.call(o).slice(8, -1);
   if (n === "Object" && o.constructor) n = o.constructor.name;
   if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
 }
 
-function _nonIterableRest() {
+function _nonIterableRest$1() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _slicedToArray$1(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
 }
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -3981,7 +3719,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$c(_objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -4143,6 +3881,10 @@ var select = {
 	},
 	approval: "Select approval"
 };
+var example = {
+	settings: "Settings",
+	general: "General"
+};
 var en = {
 	alerts: alerts$1,
 	buttons: buttons$1,
@@ -4151,7 +3893,8 @@ var en = {
 	sidebar: sidebar,
 	inputs: inputs,
 	typography: typography,
-	select: select
+	select: select,
+	example: example
 };
 
 var alerts = {
@@ -4266,6 +4009,51 @@ instance.use(Browser).use(initReactI18next).init({
   }
 });
 
+function _typeof(obj) {
+  "@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);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+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) {
@@ -4294,8 +4082,27 @@ function _iterableToArrayLimit(arr, i) {
   }
 }
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles$1(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
 var BASE_URL = "neeto_approvals";
@@ -4314,20 +4121,42 @@ var routes = {
   "public": "approvals/public/request/:id"
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+new URLSearchParams(window.location.search);
+var DEFAULT_PAGE_SIZE = 8;
+var DEFAULT_FILTER_VALUES = {
+  search: "",
+  sortBy: "",
+  sortDirection: ""
+};
+var SEARCH_DELAY = 750;
+var STATUSES = {
+  approved: "approved",
+  rejected: "rejected",
+  pending: "pending",
+  cancelled: "cancelled"
+};
+var STATUS_TAG_STYLE = {
+  pending: "primary",
+  approved: "success",
+  rejected: "danger",
+  cancelled: "warning"
+};
+var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
+  message: "",
+  variables: []
+};
+var APPROVAL_REQUEST_FORM_VALIDATION_SCHEMA = yup.object().shape({
+  variables: yup.array().of(yup.object().shape({
+    variable: yup.string().trim().required(t$2("validations.required", {
+      what: t$2("common.field")
+    }))
+  }))
+});
+var STATUS_UPDATED_BY = {
+  rejected: t$2("common.rejectedBy"),
+  approved: t$2("common.approvedBy"),
+  cancelled: t$2("common.cancelledBy")
+};
 
 var handleEmptyPage = function handleEmptyPage(data, pageProperties, handleTablePagination) {
   if (isEmpty(data) && pageProperties.index !== 1) {
@@ -4372,14 +4201,14 @@ 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$1(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$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(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$b({
+  }, _objectSpread$c({
     select: function select(response) {
       return response.data || response;
     },
@@ -4393,7 +4222,7 @@ var useFetchApprovers = function useFetchApprovers() {
 };
 var useCreateApprover = function useCreateApprover(options) {
   var queryClient = useQueryClient();
-  return useMutation(approversApi.create, _objectSpread$b(_objectSpread$b({}, options), {}, {
+  return useMutation(approversApi.create, _objectSpread$c(_objectSpread$c({}, options), {}, {
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.APPROVERS);
       queryClient.invalidateQueries(QUERY_KEYS.VIEWS);
@@ -4403,7 +4232,7 @@ var useCreateApprover = function useCreateApprover(options) {
 };
 var useUpdateApprover = function useUpdateApprover(options) {
   var queryClient = useQueryClient();
-  return useMutation(approversApi.update, _objectSpread$b(_objectSpread$b({}, options), {}, {
+  return useMutation(approversApi.update, _objectSpread$c(_objectSpread$c({}, options), {}, {
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.APPROVERS);
       options === null || options === void 0 ? void 0 : options.onSuccess();
@@ -4421,43 +4250,6 @@ var useDeleteApprover = function useDeleteApprover(options) {
   });
 };
 
-new URLSearchParams(window.location.search);
-var DEFAULT_PAGE_SIZE = 12;
-var DEFAULT_FILTER_VALUES = {
-  search: "",
-  sortBy: "",
-  sortDirection: ""
-};
-var SEARCH_DELAY = 750;
-var STATUSES = {
-  approved: "approved",
-  rejected: "rejected",
-  pending: "pending",
-  cancelled: "cancelled"
-};
-var STATUS_TAG_STYLE = {
-  pending: "primary",
-  approved: "success",
-  rejected: "danger",
-  cancelled: "warning"
-};
-var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
-  message: "",
-  variables: []
-};
-var APPROVAL_REQUEST_FORM_VALIDATION_SCHEMA = yup.object().shape({
-  variables: yup.array().of(yup.object().shape({
-    variable: yup.string().trim().required(t$2("validations.required", {
-      what: t$2("common.field")
-    }))
-  }))
-});
-var STATUS_UPDATED_BY = {
-  rejected: t$2("common.rejectedBy"),
-  approved: t$2("common.approvedBy"),
-  cancelled: t$2("common.cancelledBy")
-};
-
 var useUrlSearchParams = function useUrlSearchParams() {
   var _useLocation = useLocation(),
     search = _useLocation.search;
@@ -4501,26 +4293,7 @@ var usePaginate = function usePaginate() {
   };
 };
 
-var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
-  var entity = _ref.entity,
-    url = _ref.url;
-  return /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "common.noDataHelpText",
-    values: {
-      entity: entity
-    },
-    components: {
-      a: /*#__PURE__*/React.createElement(Link, {
-        className: "neeto-ui-text-primary-600 underline",
-        target: "_blank",
-        to: {
-          pathname: url
-        }
-      })
-    }
-  });
-};
-
+var _t$1, _t2;
 var MAX_NAME_LENGTH = 40;
 var APPROVER_FORM_INITIAL_VALUES = {
   firstName: "",
@@ -4529,13 +4302,13 @@ var APPROVER_FORM_INITIAL_VALUES = {
 };
 var APPROVER_FORM_VALIDATION_SCHEMA = yup.object().shape({
   firstName: yup.string().trim().max(MAX_NAME_LENGTH, t$2("validations.limitExceeded", {
-    what: t$2("inputs.labels.firstName").toLocaleLowerCase(),
+    what: (_t$1 = t$2("inputs.labels.firstName")) === null || _t$1 === void 0 ? void 0 : _t$1.toLocaleLowerCase(),
     limit: MAX_NAME_LENGTH
   })).required(t$2("validations.required", {
     what: t$2("inputs.labels.firstName")
   })),
   lastName: yup.string().trim().max(MAX_NAME_LENGTH, t$2("validations.limitExceeded", {
-    what: t$2("inputs.labels.lastName").toLocaleLowerCase(),
+    what: (_t2 = t$2("inputs.labels.lastName")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
     limit: MAX_NAME_LENGTH
   })).required(t$2("validations.required", {
     what: t$2("inputs.labels.lastName")
@@ -4667,7 +4440,7 @@ var Edit$1 = function Edit(_ref) {
 };
 var Edit$2 = /*#__PURE__*/React.memo(Edit$1);
 
-var Menu$2 = Dropdown.Menu,
+var Menu$1 = Dropdown.Menu,
   MenuItem$1 = Dropdown.MenuItem;
 var columnData$1 = function columnData(_ref) {
   var onEditClick = _ref.onEditClick,
@@ -4700,7 +4473,7 @@ var columnData$1 = function columnData(_ref) {
         buttonProps: {
           style: "text"
         }
-      }, /*#__PURE__*/React.createElement(Menu$2, null, /*#__PURE__*/React.createElement(MenuItem$1.Button, {
+      }, /*#__PURE__*/React.createElement(Menu$1, null, /*#__PURE__*/React.createElement(MenuItem$1.Button, {
         "data-cy": "approvers-edit-button",
         onClick: function onClick() {
           return onEditClick(approver);
@@ -4715,56 +4488,161 @@ var columnData$1 = function columnData(_ref) {
   }];
 };
 
-var Header = function Header(_ref) {
-  var title = _ref.title,
-    filters = _ref.filters,
-    setIsMenubarOpen = _ref.setIsMenubarOpen,
-    setFilters = _ref.setFilters,
-    _ref$actionBlock = _ref.actionBlock,
-    actionBlock = _ref$actionBlock === void 0 ? noop$1 : _ref$actionBlock,
-    placeholder = _ref.placeholder;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Header$2, {
-    actionBlock: actionBlock,
-    menuBarToggle: function menuBarToggle() {
-      return setIsMenubarOpen(not);
-    },
-    title: title,
-    searchProps: {
-      onChange: function onChange(event) {
-        return setFilters(assoc("search", event.target.value));
-      },
-      value: filters.search,
-      placeholder: t("inputs.placeholders.search_", {
-        what: placeholder.toLocaleLowerCase()
-      })
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  });
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
+  var entity = _ref.entity,
+    url = _ref.url;
+  return /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "common.noDataHelpText",
+    values: {
+      entity: entity
+    },
+    components: {
+      a: /*#__PURE__*/React.createElement(Link, {
+        className: "neeto-ui-text-primary-600 underline",
+        target: "_blank",
+        to: {
+          pathname: url
+        }
+      })
+    }
+  });
+};
+
+var _excluded$1 = ["entity", "columnData", "items", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick"];
+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; }
+var Table = function Table(_ref) {
+  var _t;
+  var entity = _ref.entity,
+    columnData = _ref.columnData,
+    items = _ref.items,
+    totalCount = _ref.totalCount,
+    filters = _ref.filters,
+    setFilters = _ref.setFilters,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    helpDocUrl = _ref.helpDocUrl,
+    onEditClick = _ref.onEditClick,
+    onDeleteClick = _ref.onDeleteClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handleTablePagination = _usePaginate.handleTablePagination;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var columns = columnData({
+    onEditClick: onEditClick,
+    onDeleteClick: onDeleteClick
+  });
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setFilters(_objectSpread$b(_objectSpread$b({}, filters), {}, {
+      sortBy: sorter.field,
+      sortDirection: sorter.order
+    }));
+  };
+  var noDataProps = {
+    primaryButtonProps: {
+      label: t("common.add_", {
+        what: (_t = t("common.template", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+      }),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    },
+    helpText: renderNoDataHelpText({
+      entity: entity,
+      url: helpDocUrl
+    })
+  };
+  if (isEmpty(items)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center"
+    }, /*#__PURE__*/React.createElement(NoData, _extends({
+      title: t("common.notFound_", {
+        what: entity
+      })
+    }, !filters.search && noDataProps)));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-approvals__table-wrapper"
+  }, /*#__PURE__*/React.createElement(Table$1, _extends({
+    fixedHeight: true,
+    columnData: columns,
+    currentPageNumber: pageProperties.index,
+    defaultPageSize: pageProperties.size,
+    handlePageChange: function handlePageChange(index, size) {
+      return handleTablePagination(index, size);
+    },
+    rowData: items,
+    paginationProps: {
+      hideOnSinglePage: (items === null || items === void 0 ? void 0 : items.length) < DEFAULT_PAGE_SIZE + 1
+    },
+    onChange: handleTableChange
+  }, _objectSpread$b({
+    totalCount: totalCount
+  }, otherProps))));
 };
-var Header$1 = /*#__PURE__*/React.memo(Header);
 
 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$1(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 _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; }
 var Approvers = function Approvers(_ref) {
-  var setIsMenubarOpen = _ref.setIsMenubarOpen,
-    helpDocUrl = _ref.helpDocUrl;
-  var _useState = useState(DEFAULT_FILTER_VALUES),
+  var _t, _t2, _t3;
+  var filters = _ref.filters,
+    isNewApproverPaneOpen = _ref.isNewApproverPaneOpen,
+    setIsNewApproverPaneOpen = _ref.setIsNewApproverPaneOpen,
+    helpDocUrl = _ref.helpDocUrl,
+    setFilters = _ref.setFilters;
+  var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
-  var _useState3 = useState(false),
+    approverToEdit = _useState2[0],
+    setApproverToEdit = _useState2[1];
+  var _useState3 = useState(""),
     _useState4 = _slicedToArray(_useState3, 2),
-    isNewApproverPaneOpen = _useState4[0],
-    setIsNewApproverPaneOpen = _useState4[1];
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    approverToEdit = _useState6[0],
-    setApproverToEdit = _useState6[1];
-  var _useState7 = useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    approverToDelete = _useState8[0],
-    setApproverToDelete = _useState8[1];
+    approverToDelete = _useState4[0],
+    setApproverToDelete = _useState4[1];
   var debouncedSearch = useDebounce(filters.search, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
@@ -4798,90 +4676,25 @@ var Approvers = function Approvers(_ref) {
   var onDeleteClick = function onDeleteClick(approver) {
     setApproverToDelete(approver);
   };
-  var columns = columnData$1({
-    onEditClick: onEditClick,
-    onDeleteClick: onDeleteClick
-  });
+  var entity = (_t = t("common.approver", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
   var handleDelete = function handleDelete(approverId) {
     deleteApprover({
       approverId: approverId
     });
     setApproverToDelete("");
   };
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$a(_objectSpread$a({}, filters), {}, {
-      sortBy: sorter.field,
-      sortDirection: sorter.order
-    }));
-  };
-  var ActionBlock = function ActionBlock() {
-    return /*#__PURE__*/React.createElement(Button, {
-      label: t("common.add_", {
-        what: t("common.approver", SINGULAR).toLocaleLowerCase()
-      }),
-      onClick: function onClick() {
-        return setIsNewApproverPaneOpen(true);
-      }
-    });
-  };
-  var entity = t("common.approver", PLURAL).toLocaleLowerCase();
-  var otherProps = {
-    primaryButtonProps: {
-      label: t("common.add_", {
-        what: t("common.approver", SINGULAR).toLocaleLowerCase()
-      }),
-      onClick: function onClick() {
-        return setIsNewApproverPaneOpen(true);
-      }
-    },
-    helpText: renderNoDataHelpText({
-      entity: entity,
-      url: helpDocUrl
-    })
-  };
-  if (isApproverLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-approvals-page-loader"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$1, {
-    actionBlock: /*#__PURE__*/React.createElement(ActionBlock, null),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isApproverLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Table, {
+    items: approvers,
+    setIsPaneOpen: setIsNewApproverPaneOpen,
+    columnData: columnData$1,
+    entity: entity,
     filters: filters,
+    helpDocUrl: helpDocUrl,
+    onDeleteClick: onDeleteClick,
+    onEditClick: onEditClick,
     setFilters: setFilters,
-    setIsMenubarOpen: setIsMenubarOpen,
-    placeholder: t("common.approver", PLURAL),
-    title: t("common.approver", PLURAL)
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: !!totalCount && /*#__PURE__*/React.createElement(Typography, {
-      component: "h4",
-      style: "h4"
-    }, totalCount, " ", t("common.approver", {
-      count: totalCount
-    }).toLocaleLowerCase())
-  }), !isEmpty(approvers) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
-  }, /*#__PURE__*/React.createElement(Table, {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: columns,
-    currentPageNumber: pageProperties.index,
-    defaultPageSize: pageProperties.size,
-    rowData: approvers,
-    totalCount: totalCount,
-    handlePageChange: function handlePageChange(index, size) {
-      return handleTablePagination(index, size);
-    },
-    paginationProps: {
-      hideOnSinglePage: (approvers === null || approvers === void 0 ? void 0 : approvers.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, _extends({
-    title: t("common.notFound_", {
-      what: entity
-    })
-  }, !filters.search && otherProps))), /*#__PURE__*/React.createElement(Create$2, {
+    totalCount: totalCount
+  }), /*#__PURE__*/React.createElement(Create$2, {
     handleTablePagination: handleTablePagination,
     isNewApproverPaneOpen: isNewApproverPaneOpen,
     pageProperties: pageProperties,
@@ -4897,12 +4710,12 @@ var Approvers = function Approvers(_ref) {
     message: /*#__PURE__*/React.createElement(Trans, {
       i18nKey: "alerts.deleting_",
       values: {
-        what: t("common.approver", SINGULAR).toLocaleLowerCase(),
+        what: (_t2 = t("common.approver", SINGULAR)) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
         name: approverToDelete === null || approverToDelete === void 0 ? void 0 : approverToDelete.name
       }
     }),
     title: t("common.delete_", {
-      what: t("common.approver", SINGULAR).toLocaleLowerCase()
+      what: (_t3 = t("common.approver", SINGULAR)) === null || _t3 === void 0 ? void 0 : _t3.toLocaleLowerCase()
     }),
     onClose: function onClose() {
       return setApproverToDelete("");
@@ -4931,7 +4744,7 @@ var requestsApi = {
 };
 
 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$1(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 _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; }
 var useFetchRequests = function useFetchRequests() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -4972,9 +4785,9 @@ var HISTORY_TABLE_COLUMNS = [{
     var requestableUrl = _ref.requestableUrl;
     var url = new URL(requestableUrl || window.location.origin);
     return /*#__PURE__*/React.createElement(Button, {
-      to: url.pathname,
       label: approvalLabel,
-      style: "link"
+      style: "link",
+      to: url.pathname
     });
   }
 }, {
@@ -5008,7 +4821,7 @@ var HISTORY_TABLE_COLUMNS = [{
 
 var MemoizedEditorContent$1 = /*#__PURE__*/React.memo(EditorContent);
 var ApprovalsDetails = function ApprovalsDetails(_ref) {
-  var _window$globalProps, _window$globalProps$u;
+  var _window$globalProps, _window$globalProps$u, _t;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     approvalDetails = _ref.approvalDetails,
@@ -5089,7 +4902,7 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
     label: t("common.note"),
     value: note,
     placeholder: t("inputs.placeholders.add_", {
-      what: t("common.note").toLocaleLowerCase()
+      what: (_t = t("common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     }),
     onChange: withEventTargetValue(setNote)
   }), !isPending && note && /*#__PURE__*/React.createElement("div", {
@@ -5148,10 +4961,10 @@ var getApprovalFilter = function getApprovalFilter() {
 };
 
 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$1(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 _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; }
 var History = function History(_ref) {
-  var setIsMenubarOpen = _ref.setIsMenubarOpen,
-    requestUrl = _ref.requestUrl;
+  var _t;
+  var requestUrl = _ref.requestUrl;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
@@ -5192,22 +5005,9 @@ var History = function History(_ref) {
       sortDirection: sorter.order
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$1, {
-    filters: filters,
-    setFilters: setFilters,
-    setIsMenubarOpen: setIsMenubarOpen,
-    placeholder: t("common.history"),
-    title: t("common.approvalHistory")
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: !!totalCount && /*#__PURE__*/React.createElement(Typography, {
-      component: "h4",
-      style: "h4"
-    }, totalCount, " ", t("common.record", {
-      count: totalCount
-    }).toLocaleLowerCase())
-  }), !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement("div", {
     className: "neeto-approvals__table-wrapper"
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
     columnData: HISTORY_TABLE_COLUMNS,
@@ -5229,7 +5029,7 @@ var History = function History(_ref) {
     className: "flex h-full w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React.createElement(NoData, {
     title: t("common.notFound_", {
-      what: t("common.record", PLURAL).toLocaleLowerCase()
+      what: (_t = t("common.record", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
   })), /*#__PURE__*/React.createElement(ApprovalsDetails, {
     approvalDetails: approvalDetails,
@@ -5245,10 +5045,10 @@ var PENDING_TABLE_COLUMNS = removeBy({
 }, HISTORY_TABLE_COLUMNS);
 
 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$1(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; }
+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 PendingRequests = function PendingRequests(_ref) {
-  var setIsMenubarOpen = _ref.setIsMenubarOpen,
-    requestUrl = _ref.requestUrl;
+  var _t;
+  var requestUrl = _ref.requestUrl;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
@@ -5296,22 +5096,9 @@ var PendingRequests = function PendingRequests(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$1, {
-    filters: filters,
-    setFilters: setFilters,
-    setIsMenubarOpen: setIsMenubarOpen,
-    placeholder: t("common.pendingApproval", PLURAL),
-    title: t("common.pendingApproval", PLURAL)
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: !!totalCount && /*#__PURE__*/React.createElement(Typography, {
-      component: "h4",
-      style: "h4"
-    }, totalCount, " ", t("common.pendingApproval", {
-      count: totalCount
-    }).toLocaleLowerCase())
-  }), !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement("div", {
     className: "neeto-approvals__table-wrapper"
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table$1, {
     allowRowClick: true,
     fixedHeight: true,
     columnData: PENDING_TABLE_COLUMNS,
@@ -5333,7 +5120,7 @@ var PendingRequests = function PendingRequests(_ref) {
     className: "flex h-full w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React.createElement(NoData, {
     title: t("common.notFound_", {
-      what: t("common.pendingApproval", PLURAL).toLocaleLowerCase()
+      what: (_t = t("common.pendingApproval", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
   })), /*#__PURE__*/React.createElement(ApprovalsDetails, {
     isPending: true,
@@ -5381,7 +5168,7 @@ var templatesApi = {
 };
 
 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$1(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; }
+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 useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -5399,12 +5186,6 @@ var useFetchTemplates = function useFetchTemplates() {
     }
   }, options));
 };
-var useFetchTemplate = function useFetchTemplate(_ref2) {
-  var templateId = _ref2.templateId;
-  return useQuery([QUERY_KEYS.SHOW_TEMPLATE, templateId], function () {
-    return templatesApi.show(templateId);
-  });
-};
 var useCreateTemplate = function useCreateTemplate(options) {
   var queryClient = useQueryClient();
   return useMutation(templatesApi.create, _objectSpread$6(_objectSpread$6({}, options), {}, {
@@ -5440,19 +5221,23 @@ var useDeleteTemplate = function useDeleteTemplate(options) {
   });
 };
 
-var Field = function Field(_ref) {
-  var label = _ref.label,
-    value = _ref.value;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-start justify-center"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, label), /*#__PURE__*/React.createElement("p", {
-    className: "neeto-ui-text-gray-800 break-words text-base font-medium"
-  }, value));
-};
-var Field$1 = /*#__PURE__*/React.memo(Field);
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
+var _t;
 var VALID_VARIABLE_NAME_REGEX = /^[a-z](?:\w*[a-z0-9])*$/i;
 var TEMPLATE_FORM_INITIAL_VALUES = {
   name: "",
@@ -5474,7 +5259,7 @@ var TEMPLATE_FORM_VALIDATION_SCHEMA = yup.object().shape({
   }),
   variables: yup.array().of(yup.object().shape({
     variable: yup.string().trim().required(t$2("validations.pleaseEnter_", {
-      what: t$2("common.variable").toLocaleLowerCase()
+      what: (_t = t$2("common.variable")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })).matches(VALID_VARIABLE_NAME_REGEX, t$2("validations.variableName"))
   }))
 });
@@ -5483,285 +5268,7 @@ var EVERYONE_VISIBILITY = {
   value: "everyone"
 };
 
-var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
-var TemplateDetails = function TemplateDetails(_ref) {
-  var _Object$entries;
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    templateDetails = _ref.templateDetails;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var name = templateDetails.name,
-    description = templateDetails.description,
-    approverName = templateDetails.approverName,
-    accessible = templateDetails.accessible,
-    variables = templateDetails.variables,
-    message = templateDetails.message;
-  return /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("common.templateDetails"))), /*#__PURE__*/React.createElement(Pane.Body, {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement(Field$1, {
-    label: t("common.name"),
-    value: name
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("inputs.labels.description"),
-    value: description
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("common.approver", SINGULAR),
-    value: approverName
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("common.visibility"),
-    value: (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label
-  }), (_Object$entries = Object.entries(variables || {})) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      variable = _ref3[0],
-      value = _ref3[1];
-    return /*#__PURE__*/React.createElement(Field$1, {
-      key: value,
-      label: capitalize$1(variable),
-      value: value
-    });
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, t("inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent, {
-    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-    content: message
-  }))));
-};
-
-var Menu$1 = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
-var columnData = function columnData(_ref) {
-  var onEditClick = _ref.onEditClick,
-    onDeleteClick = _ref.onDeleteClick;
-  return [{
-    dataIndex: "name",
-    key: "name",
-    sorter: true,
-    title: instance.t("common.name")
-  }, {
-    dataIndex: "visibility",
-    key: "visibility",
-    title: instance.t("common.visibility"),
-    render: function render(_, _ref2) {
-      var accessible = _ref2.accessible;
-      return (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label;
-    }
-  }, {
-    key: "actions",
-    ellipsis: true,
-    render: function render(_, template) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-row items-center justify-end space-x-3",
-        onClick: function onClick(event) {
-          return event.stopPropagation();
-        }
-      }, /*#__PURE__*/React.createElement(Dropdown, {
-        autoWidth: true,
-        buttonProps: {
-          style: "text"
-        },
-        className: "flex-shrink-0",
-        icon: MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed"
-      }, /*#__PURE__*/React.createElement(Menu$1, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "approvers-edit-button",
-        onClick: function onClick() {
-          return onEditClick(template.id);
-        }
-      }, instance.t("common.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
-        "data-cy": "approvers-delete-button",
-        onClick: function onClick() {
-          return onDeleteClick(template);
-        }
-      }, instance.t("common.delete")))));
-    }
-  }];
-};
-
-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$1(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; }
-var Templates = function Templates(_ref) {
-  var setIsMenubarOpen = _ref.setIsMenubarOpen,
-    approvalsPath = _ref.approvalsPath,
-    helpDocUrl = _ref.helpDocUrl;
-  var _useState = useState(DEFAULT_FILTER_VALUES),
-    _useState2 = _slicedToArray(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
-  var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    templateToDelete = _useState4[0],
-    setTemplateToDelete = _useState4[1];
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    templateDetails = _useState6[0],
-    setTemplateDetails = _useState6[1];
-  var debouncedSearch = useDebounce(filters.search, SEARCH_DELAY);
-  var history = useHistory();
-  var _usePaginate = usePaginate(),
-    pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
-      search: debouncedSearch.trim()
-    }), {
-      onSuccess: function onSuccess(templates) {
-        handleEmptyPage(templates, pageProperties, handleTablePagination);
-      }
-    }),
-    _useFetchTemplates$da = _useFetchTemplates.data,
-    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
-    _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
-    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
-    _useFetchTemplates$da4 = _useFetchTemplates$da2.totalCount,
-    totalCount = _useFetchTemplates$da4 === void 0 ? 0 : _useFetchTemplates$da4,
-    isTemplateLoading = _useFetchTemplates.isLoading;
-  var _useDeleteTemplate = useDeleteTemplate(),
-    deleteTemplate = _useDeleteTemplate.mutate,
-    isDeleting = _useDeleteTemplate.isLoading;
-  var onEditClick = function onEditClick(id) {
-    history.push(buildUrl("".concat(approvalsPath).concat(routes.templates.edit), {
-      id: id
-    }));
-  };
-  var onDeleteClick = function onDeleteClick(template) {
-    setTemplateToDelete(template);
-  };
-  var columns = columnData({
-    onEditClick: onEditClick,
-    onDeleteClick: onDeleteClick
-  });
-  var handleDelete = function handleDelete(templateId) {
-    deleteTemplate({
-      templateId: templateId
-    });
-    setTemplateToDelete("");
-  };
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$5(_objectSpread$5({}, filters), {}, {
-      sortBy: sorter.field,
-      sortDirection: sorter.order
-    }));
-  };
-  var ActionBlock = function ActionBlock() {
-    return /*#__PURE__*/React.createElement(Button, {
-      to: "".concat(approvalsPath).concat(routes.templates["new"]),
-      label: t("common.add_", {
-        what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
-      })
-    });
-  };
-  var entity = t("common.template", PLURAL).toLocaleLowerCase();
-  var otherProps = {
-    primaryButtonProps: {
-      label: t("common.add_", {
-        what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
-      }),
-      to: "".concat(approvalsPath).concat(routes.templates["new"])
-    },
-    helpText: renderNoDataHelpText({
-      entity: entity,
-      url: helpDocUrl
-    })
-  };
-  if (isTemplateLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-approvals-page-loader"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$1, {
-    actionBlock: /*#__PURE__*/React.createElement(ActionBlock, null),
-    filters: filters,
-    setFilters: setFilters,
-    setIsMenubarOpen: setIsMenubarOpen,
-    placeholder: t("common.template", PLURAL),
-    title: t("common.template", PLURAL)
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: !!totalCount && /*#__PURE__*/React.createElement(Typography, {
-      component: "h4",
-      style: "h4"
-    }, totalCount, " ", t("common.approvalTemplate", {
-      count: totalCount
-    }).toLocaleLowerCase())
-  }), !isEmpty(templates) ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals__table-wrapper"
-  }, /*#__PURE__*/React.createElement(Table, {
-    allowRowClick: true,
-    fixedHeight: true,
-    columnData: columns,
-    currentPageNumber: pageProperties.index,
-    defaultPageSize: pageProperties.size,
-    rowData: templates,
-    totalCount: totalCount,
-    handlePageChange: function handlePageChange(index, size) {
-      return handleTablePagination(index, size);
-    },
-    paginationProps: {
-      hideOnSinglePage: (templates === null || templates === void 0 ? void 0 : templates.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange,
-    onRowClick: function onRowClick(_, templateDetails) {
-      return setTemplateDetails(templateDetails);
-    }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, _extends({
-    title: t("common.notFound_", {
-      what: entity
-    })
-  }, !filters.search && otherProps))), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: !!templateToDelete,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("buttons.delete"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "alerts.deleting_",
-      values: {
-        what: t("common.template", SINGULAR).toLocaleLowerCase(),
-        name: templateToDelete === null || templateToDelete === void 0 ? void 0 : templateToDelete.name
-      }
-    }),
-    title: t("common.delete_", {
-      what: t("common.template", SINGULAR).toLocaleLowerCase()
-    }),
-    onClose: function onClose() {
-      return setTemplateToDelete("");
-    },
-    onSubmit: function onSubmit() {
-      return handleDelete(templateToDelete === null || templateToDelete === void 0 ? void 0 : templateToDelete.id);
-    }
-  }), /*#__PURE__*/React.createElement(TemplateDetails, {
-    isOpen: !!templateDetails,
-    templateDetails: templateDetails,
-    onClose: function onClose() {
-      return setTemplateDetails("");
-    }
-  }));
-};
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
-}
-
-var DynamicBlock = function DynamicBlock() {
+var DynamicBlock = function DynamicBlock() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
@@ -5831,14 +5338,17 @@ var DynamicBlock = function DynamicBlock() {
 };
 
 var Form$1 = function Form(_ref) {
-  var _ref$initialData = _ref.initialData,
+  var _t, _t2;
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$initialData = _ref.initialData,
     initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? noop$1 : _ref$onSubmit,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     visibilityOptions = _ref.visibilityOptions;
-  var history = useHistory();
+  var inputReference = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchApprovers = useFetchApprovers(),
@@ -5846,16 +5356,27 @@ var Form$1 = function Form(_ref) {
     _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
     _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
     approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(Form$3, {
+  var header = isEmpty(initialData) ? t("common.add_", {
+    what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
+  }) : t("common.edit_", {
+    what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
+  });
+  return /*#__PURE__*/React.createElement(Pane, {
+    initialFocusRef: inputReference,
+    size: "large",
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, 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("div", {
-    className: "flex flex-col space-y-6"
+  }, /*#__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,
     className: "w-1/2",
@@ -5879,17 +5400,17 @@ var Form$1 = function Form(_ref) {
       };
     }),
     placeholder: t("inputs.placeholders.select_", {
-      what: t("common.approver", SINGULAR).toLocaleLowerCase()
+      what: (_t = t("common.approver", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
   }), /*#__PURE__*/React.createElement(Select, {
     label: t("common.visibility"),
     name: "visibility",
     options: [].concat(_toConsumableArray(visibilityOptions), [EVERYONE_VISIBILITY]),
     placeholder: t("inputs.placeholders.select_", {
-      what: t("common.visibility").toLocaleLowerCase()
+      what: (_t2 = t("common.visibility")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase()
     })
-  })), /*#__PURE__*/React.createElement(DynamicBlock, null), /*#__PURE__*/React.createElement("div", {
-    className: "space-x-4 pb-6"
+  })), /*#__PURE__*/React.createElement(DynamicBlock, null))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "flex gap-x-2"
   }, /*#__PURE__*/React.createElement(Button, {
     label: t("buttons.saveChanges"),
     loading: isLoading,
@@ -5897,14 +5418,12 @@ var Form$1 = function Form(_ref) {
   }), /*#__PURE__*/React.createElement(Button, {
     label: t("buttons.cancel"),
     style: "text",
-    onClick: function onClick() {
-      return history.goBack();
-    }
+    onClick: onClose
   })))));
 };
 
-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$1(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(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; }
 var buildTemplatePayload = function buildTemplatePayload(template) {
   var variables = template.variables,
     visibility = template.visibility,
@@ -5914,7 +5433,7 @@ var buildTemplatePayload = function buildTemplatePayload(template) {
     return ["variable".concat(index + 1), variable];
   });
   var payload = {
-    template: _objectSpread$4(_objectSpread$4({}, template), {}, {
+    template: _objectSpread$5(_objectSpread$5({}, template), {}, {
       accessibleId: visibility.value || visibility,
       approverId: approver.value,
       variables: fromPairs(indexedVariables)
@@ -5922,14 +5441,26 @@ var buildTemplatePayload = function buildTemplatePayload(template) {
   };
   return payload;
 };
+var generateInitialData = function generateInitialData(template) {
+  return _objectSpread$5(_objectSpread$5({}, template), {}, {
+    visibility: template.accessibleId || EVERYONE_VISIBILITY.value,
+    approver: {
+      label: template.approverName,
+      value: template.approverId
+    },
+    variables: template.variables && Object.values(template.variables).map(function (variable) {
+      return {
+        variable: variable
+      };
+    })
+  });
+};
 
 var Create = function Create(_ref) {
-  var approvalsPath = _ref.approvalsPath,
-    visibilityOptions = _ref.visibilityOptions,
-    templateUrl = _ref.templateUrl;
-  var history = useHistory();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var visibilityOptions = _ref.visibilityOptions,
+    templateUrl = _ref.templateUrl,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
   var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
     isLoading = _useCreateTemplate.isLoading;
@@ -5939,53 +5470,28 @@ var Create = function Create(_ref) {
       url: templateUrl,
       payload: payload
     }, {
-      onSuccess: function onSuccess() {
-        return (
-          // eslint-disable-next-line @bigbinary/neeto/use-common-routes
-          history.push("".concat(approvalsPath).concat(routes.templates.index))
-        );
-      }
+      onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$2, {
-    breadcrumbs: [{
-      link: "".concat(approvalsPath).concat(routes.templates.index),
-      text: t("common.template", PLURAL)
-    }],
-    title: t("common.add_", {
-      what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
-    })
-  }), /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$1, {
     isLoading: isLoading,
+    isOpen: isOpen,
+    onClose: onClose,
     onSubmit: onSubmit,
     visibilityOptions: visibilityOptions
-  }));
+  });
 };
 
-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$1(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; }
 var Edit = function Edit(_ref) {
-  var _template$approver, _template$approver2;
-  var approvalsPath = _ref.approvalsPath,
-    visibilityOptions = _ref.visibilityOptions,
-    templateUrl = _ref.templateUrl;
-  var _useParams = useParams(),
-    id = _useParams.id;
-  var history = useHistory();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFetchTemplate = useFetchTemplate({
-      templateId: id
-    }),
-    _useFetchTemplate$dat = _useFetchTemplate.data,
-    _useFetchTemplate$dat2 = _useFetchTemplate$dat === void 0 ? {} : _useFetchTemplate$dat,
-    _useFetchTemplate$dat3 = _useFetchTemplate$dat2.template,
-    template = _useFetchTemplate$dat3 === void 0 ? {} : _useFetchTemplate$dat3,
-    isFetchingTemplate = _useFetchTemplate.isLoading;
+  var visibilityOptions = _ref.visibilityOptions,
+    templateUrl = _ref.templateUrl,
+    template = _ref.template,
+    setTemplate = _ref.setTemplate,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose;
   var _useUpdateTemplate = useUpdateTemplate({
-      // eslint-disable-next-line @bigbinary/neeto/use-common-routes
       onSuccess: function onSuccess() {
-        return history.push("".concat(approvalsPath).concat(routes.templates.index));
+        return setTemplate({});
       }
     }),
     updateTemplate = _useUpdateTemplate.mutate,
@@ -5993,77 +5499,365 @@ var Edit = function Edit(_ref) {
   var onSubmit = function onSubmit(template) {
     var payload = buildTemplatePayload(template);
     updateTemplate({
-      id: id,
+      id: template.id,
       payload: payload,
       url: templateUrl
     });
   };
-  if (isFetchingTemplate) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-approvals-page-loader"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header$2, {
-    breadcrumbs: [{
-      link: "".concat(approvalsPath).concat(routes.templates.index),
-      text: t("common.template", PLURAL)
-    }],
-    title: t("common.edit_", {
-      what: t("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
-    })
-  }), /*#__PURE__*/React.createElement(Form$1, {
+  return /*#__PURE__*/React.createElement(Form$1, {
+    initialData: generateInitialData(template),
     isLoading: isUpdating,
+    isOpen: isOpen,
+    onClose: onClose,
     onSubmit: onSubmit,
-    visibilityOptions: visibilityOptions,
-    initialData: _objectSpread$3(_objectSpread$3({}, template), {}, {
-      visibility: template.accessible.id || EVERYONE_VISIBILITY.value,
-      approver: {
-        label: (_template$approver = template.approver) === null || _template$approver === void 0 ? void 0 : _template$approver.name,
-        value: (_template$approver2 = template.approver) === null || _template$approver2 === void 0 ? void 0 : _template$approver2.id
-      },
-      variables: Object.values(template.variables).map(function (variable) {
-        return {
-          variable: variable
-        };
-      })
-    })
+    visibilityOptions: visibilityOptions
+  });
+};
+
+var Field = function Field(_ref) {
+  var label = _ref.label,
+    value = _ref.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-start justify-center"
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "mb-1 font-normal"
+  }, label), /*#__PURE__*/React.createElement("p", {
+    className: "neeto-ui-text-gray-800 break-words text-base font-medium"
+  }, value));
+};
+var Field$1 = /*#__PURE__*/React.memo(Field);
+
+var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
+var TemplateDetails = function TemplateDetails(_ref) {
+  var _Object$entries;
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    template = _ref.template;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var name = template.name,
+    description = template.description,
+    approverName = template.approverName,
+    accessible = template.accessible,
+    variables = template.variables,
+    message = template.message;
+  return /*#__PURE__*/React.createElement(Pane, {
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Pane.Header, {
+    className: "space-y-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, t("common.templateDetails"))), /*#__PURE__*/React.createElement(Pane.Body, {
+    className: "space-y-6"
+  }, /*#__PURE__*/React.createElement(Field$1, {
+    label: t("common.name"),
+    value: name
+  }), /*#__PURE__*/React.createElement(Field$1, {
+    label: t("inputs.labels.description"),
+    value: description
+  }), /*#__PURE__*/React.createElement(Field$1, {
+    label: t("common.approver", SINGULAR),
+    value: approverName
+  }), /*#__PURE__*/React.createElement(Field$1, {
+    label: t("common.visibility"),
+    value: (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label
+  }), (_Object$entries = Object.entries(variables || {})) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      variable = _ref3[0],
+      value = _ref3[1];
+    return /*#__PURE__*/React.createElement(Field$1, {
+      key: value,
+      label: capitalize$1(variable),
+      value: value
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col space-y-4"
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "mb-1 font-normal"
+  }, t("inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent, {
+    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
+    content: message
+  }))));
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var columnData = function columnData(_ref) {
+  var onEditClick = _ref.onEditClick,
+    onDeleteClick = _ref.onDeleteClick;
+  return [{
+    dataIndex: "name",
+    key: "name",
+    sorter: true,
+    title: instance.t("common.name")
+  }, {
+    dataIndex: "visibility",
+    key: "visibility",
+    title: instance.t("common.visibility"),
+    render: function render(_, _ref2) {
+      var accessible = _ref2.accessible;
+      return (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label;
+    }
+  }, {
+    key: "actions",
+    ellipsis: true,
+    render: function render(_, template) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-row items-center justify-end space-x-3",
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement(Dropdown, {
+        autoWidth: true,
+        buttonProps: {
+          style: "text"
+        },
+        className: "flex-shrink-0",
+        icon: MenuHorizontal,
+        position: "bottom-end",
+        strategy: "fixed"
+      }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+        "data-cy": "approvers-edit-button",
+        onClick: function onClick() {
+          return onEditClick(template);
+        }
+      }, instance.t("common.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
+        "data-cy": "approvers-delete-button",
+        onClick: function onClick() {
+          return onDeleteClick(template);
+        }
+      }, instance.t("common.delete")))));
+    }
+  }];
+};
+
+var _excluded = ["filters", "isNewTemplatePaneOpen", "setFilters", "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; }
+var Templates = function Templates(_ref) {
+  var _t, _t2, _t3;
+  var filters = _ref.filters,
+    isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
+    setFilters = _ref.setFilters,
+    setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
+    helpDocUrl = _ref.helpDocUrl,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTemplate = _useState2[0],
+    setSelectedTemplate = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isEditPaneOpen = _useState6[0],
+    setIsEditPaneOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isShowPaneOpen = _useState8[0],
+    setIsShowPaneOpen = _useState8[1];
+  var debouncedSearch = useDebounce(filters.search, SEARCH_DELAY);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handleTablePagination = _usePaginate.handleTablePagination;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchTemplates = useFetchTemplates(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, pageProperties), filters), {}, {
+      search: debouncedSearch.trim()
+    }), {
+      onSuccess: function onSuccess(templates) {
+        handleEmptyPage(templates, pageProperties, handleTablePagination);
+      }
+    }),
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
+    _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
+    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
+    _useFetchTemplates$da4 = _useFetchTemplates$da2.totalCount,
+    totalCount = _useFetchTemplates$da4 === void 0 ? 0 : _useFetchTemplates$da4,
+    isTemplateLoading = _useFetchTemplates.isLoading;
+  var _useDeleteTemplate = useDeleteTemplate(),
+    deleteTemplate = _useDeleteTemplate.mutate,
+    isDeleting = _useDeleteTemplate.isLoading;
+  useEffect(function () {
+    if (isEmpty(selectedTemplate)) {
+      setIsDeleteAlertOpen(false);
+      setIsEditPaneOpen(false);
+      setIsShowPaneOpen(false);
+    }
+  }, [selectedTemplate]);
+  var onEditClick = function onEditClick(template) {
+    setSelectedTemplate(template);
+    setIsEditPaneOpen(true);
+  };
+  var onRowClick = function onRowClick(_, templateDetails) {
+    setSelectedTemplate(templateDetails);
+    setIsShowPaneOpen(true);
+  };
+  var onDeleteClick = function onDeleteClick(template) {
+    setSelectedTemplate(template);
+    setIsDeleteAlertOpen(true);
+  };
+  var handleDelete = function handleDelete(templateId) {
+    deleteTemplate({
+      templateId: templateId
+    });
+    setSelectedTemplate({});
+  };
+  var entity = (_t = t("common.template", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isTemplateLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Table, {
+    items: templates,
+    setIsPaneOpen: setIsNewTemplatePaneOpen,
+    columnData: columnData,
+    entity: entity,
+    filters: filters,
+    helpDocUrl: helpDocUrl,
+    onDeleteClick: onDeleteClick,
+    onEditClick: onEditClick,
+    onRowClick: onRowClick,
+    setFilters: setFilters,
+    totalCount: totalCount
+  }), /*#__PURE__*/React.createElement(Create, _extends({
+    isOpen: isNewTemplatePaneOpen,
+    onClose: function onClose() {
+      return setIsNewTemplatePaneOpen(false);
+    }
+  }, otherProps)), /*#__PURE__*/React.createElement(Edit, _extends({
+    isOpen: isEditPaneOpen,
+    setTemplate: setSelectedTemplate,
+    template: selectedTemplate
+  }, otherProps, {
+    onClose: function onClose() {
+      return setIsEditPaneOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isDeleteAlertOpen,
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("buttons.delete"),
+    message: /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "alerts.deleting_",
+      values: {
+        what: (_t2 = t("common.template", SINGULAR)) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
+        name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+      }
+    }),
+    title: t("common.delete_", {
+      what: (_t3 = t("common.template", SINGULAR)) === null || _t3 === void 0 ? void 0 : _t3.toLocaleLowerCase()
+    }),
+    onClose: function onClose() {
+      return setSelectedTemplate({});
+    },
+    onSubmit: function onSubmit() {
+      return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
+    }
+  }), /*#__PURE__*/React.createElement(TemplateDetails, {
+    isOpen: isShowPaneOpen,
+    template: selectedTemplate,
+    onClose: function onClose() {
+      return setSelectedTemplate({});
+    }
   }));
 };
 
-var createRoutes = function createRoutes(props) {
+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; }
+var createRoutes = function createRoutes(_ref) {
+  var config = _ref.config,
+    filters = _ref.filters,
+    isNewApproverPaneOpen = _ref.isNewApproverPaneOpen,
+    isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
+    setFilters = _ref.setFilters,
+    setIsNewApproverPaneOpen = _ref.setIsNewApproverPaneOpen,
+    setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
-      return /*#__PURE__*/React.createElement(Approvers, props);
+      return /*#__PURE__*/React.createElement(Approvers, _objectSpread$3({
+        filters: filters,
+        isNewApproverPaneOpen: isNewApproverPaneOpen,
+        setFilters: setFilters,
+        setIsNewApproverPaneOpen: setIsNewApproverPaneOpen
+      }, config));
     },
-    path: "".concat(props.approvalsPath).concat(routes.approvers)
-  }, {
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Templates, props);
+    path: "".concat(config.approvalsPath).concat(routes.approvers),
+    actionBlock: function actionBlock() {
+      return /*#__PURE__*/React.createElement(Button, {
+        label: t$2("common.add_", {
+          what: t$2("common.approver", SINGULAR).toLocaleLowerCase()
+        }),
+        onClick: function onClick() {
+          return setIsNewApproverPaneOpen(true);
+        }
+      });
     },
-    path: "".concat(props.approvalsPath).concat(routes.templates.index)
+    searchPlaceholder: t$2("inputs.placeholders.search_", {
+      what: t$2("common.approver", PLURAL).toLocaleLowerCase()
+    })
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(Create, props);
+      return /*#__PURE__*/React.createElement(Templates, _objectSpread$3({
+        filters: filters,
+        isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+        setFilters: setFilters,
+        setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+      }, config));
     },
-    path: "".concat(props.approvalsPath).concat(routes.templates["new"])
-  }, {
-    component: function component() {
-      return /*#__PURE__*/React.createElement(Edit, props);
+    path: "".concat(config.approvalsPath).concat(routes.templates.index),
+    actionBlock: function actionBlock() {
+      return /*#__PURE__*/React.createElement(Button, {
+        label: t$2("common.add_", {
+          what: t$2("common.approvalTemplate", SINGULAR).toLocaleLowerCase()
+        }),
+        onClick: function onClick() {
+          return setIsNewTemplatePaneOpen(true);
+        }
+      });
     },
-    path: "".concat(props.approvalsPath).concat(routes.templates.edit)
+    searchPlaceholder: t$2("inputs.placeholders.search_", {
+      what: t$2("common.template", PLURAL).toLocaleLowerCase()
+    })
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(PendingRequests, props);
+      return /*#__PURE__*/React.createElement(PendingRequests, config);
     },
-    path: "".concat(props.approvalsPath).concat(routes.pending)
+    path: "".concat(config.approvalsPath).concat(routes.pending)
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(History, props);
+      return /*#__PURE__*/React.createElement(History, config);
     },
-    path: "".concat(props.approvalsPath).concat(routes.history)
+    path: "".concat(config.approvalsPath).concat(routes.history)
   }];
 };
 
+var Header = function Header(_ref) {
+  var _currentTab$actionBlo;
+  var appRoutes = _ref.appRoutes,
+    breadcrumbs = _ref.breadcrumbs,
+    filters = _ref.filters,
+    setFilters = _ref.setFilters;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  var currentTab = findBy({
+    path: pathname
+  }, appRoutes);
+  return /*#__PURE__*/React.createElement(NeetoHeader, {
+    actionBlock: currentTab === null || currentTab === void 0 ? void 0 : (_currentTab$actionBlo = currentTab.actionBlock) === null || _currentTab$actionBlo === void 0 ? void 0 : _currentTab$actionBlo.call(currentTab),
+    title: t("common.approval", PLURAL),
+    searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
+      onChange: function onChange(event) {
+        return setFilters(assoc("search", event.target.value));
+      },
+      value: filters.search,
+      placeholder: currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder
+    },
+    breadcrumbs: breadcrumbs
+  });
+};
+
 var fetch = function fetch() {
   return axios.get("".concat(BASE_URL, "/views"));
 };
@@ -6072,7 +5866,7 @@ var viewsApi = {
 };
 
 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$1(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 _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; }
 var useFetchViews = function useFetchViews() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return useQuery([QUERY_KEYS.VIEWS], function () {
@@ -6084,16 +5878,14 @@ var useFetchViews = function useFetchViews() {
   }, options));
 };
 
-var Menu = function Menu(_ref) {
+var Tab = function Tab(_ref) {
   var _pathname$split$;
-  var isMenuOpen = _ref.isMenuOpen,
-    approvalsPath = _ref.approvalsPath;
-  var approvalFilter = getApprovalFilter();
-  var approvalFilterKeys = keys(approvalFilter);
+  var approvalsPath = _ref.approvalsPath;
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var history = useHistory();
+  var approvalFilter = getApprovalFilter();
+  var approvalFilterKeys = keys(approvalFilter);
   var category = (_pathname$split$ = pathname.split(routes.approvals)[1]) === null || _pathname$split$ === void 0 ? void 0 : _pathname$split$.toLocaleUpperCase();
   var isActive = function isActive(filter) {
     return category.includes(filter);
@@ -6106,46 +5898,60 @@ var Menu = function Menu(_ref) {
     _useFetchViews$data2 = _useFetchViews$data === void 0 ? {} : _useFetchViews$data,
     _useFetchViews$data2$ = _useFetchViews$data2.views,
     views = _useFetchViews$data2$ === void 0 ? {} : _useFetchViews$data2$;
-  return /*#__PURE__*/React.createElement(MenuBar, {
-    showMenu: isMenuOpen,
-    title: t("common.approval", PLURAL)
-  }, approvalFilterKeys.map(function (filter) {
-    return /*#__PURE__*/React.createElement(MenuBar.Block, {
+  return /*#__PURE__*/React.createElement(Tab$1, null, approvalFilterKeys.map(function (filter) {
+    return /*#__PURE__*/React.createElement(Tab$1.Item, {
       active: isActive(filter),
-      count: views[filter.toLocaleLowerCase()],
+      count: views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()],
       key: filter,
       label: approvalFilter[filter].label,
-      url: getRoute(filter)
-    });
+      onClick: function onClick() {
+        return history.push(getRoute(filter));
+      }
+    }, approvalFilter[filter].label, " (", views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()] || 0, ")");
   }));
 };
 
 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$1(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 _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; }
 var Approvals = function Approvals(_ref) {
   var config = _ref.config;
-  var _useState = useState(true),
+  var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
-    isMenubarOpen = _useState2[0],
-    setIsMenubarOpen = _useState2[1];
-  var appRoutes = createRoutes(_objectSpread$1(_objectSpread$1({}, config), {}, {
-    setIsMenubarOpen: setIsMenubarOpen
-  }));
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isNewTemplatePaneOpen = _useState4[0],
+    setIsNewTemplatePaneOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isNewApproverPaneOpen = _useState6[0],
+    setIsNewApproverPaneOpen = _useState6[1];
+  var appRoutes = createRoutes({
+    config: config,
+    filters: filters,
+    isNewApproverPaneOpen: isNewApproverPaneOpen,
+    isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+    setFilters: setFilters,
+    setIsNewApproverPaneOpen: setIsNewApproverPaneOpen,
+    setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-approvals"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-approvals-wrapper"
-  }, /*#__PURE__*/React.createElement(Menu, {
-    approvalsPath: config.approvalsPath,
-    isMenuOpen: isMenubarOpen
-  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Switch, null, appRoutes.map(function (_ref2) {
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$1({
+    appRoutes: appRoutes,
+    filters: filters,
+    setFilters: setFilters
+  }, config)), /*#__PURE__*/React.createElement(Tab, {
+    approvalsPath: config.approvalsPath
+  }), /*#__PURE__*/React.createElement(Switch, null, appRoutes.map(function (_ref2) {
     var path = _ref2.path,
       component = _ref2.component;
     return /*#__PURE__*/React.createElement(Route, {
       exact: true,
       component: component,
-      key: path,
-      path: path
+      path: path,
+      key: path
     });
   }), /*#__PURE__*/React.createElement(Redirect, {
     exact: true,
@@ -6153,10 +5959,11 @@ var Approvals = function Approvals(_ref) {
     // eslint-disable-next-line @bigbinary/neeto/use-common-routes
     ,
     to: "".concat(config.approvalsPath).concat(routes.pending)
-  })))));
+  }))));
 };
 
 var Form = function Form(_ref) {
+  var _t;
   var isOpen = _ref.isOpen,
     setIsPaneOpen = _ref.setIsPaneOpen,
     onSubmit = _ref.onSubmit,
@@ -6221,7 +6028,7 @@ var Form = function Form(_ref) {
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     style: "h2"
   }, t("common.add_", {
-    what: t("common.approval", SINGULAR).toLocaleLowerCase()
+    what: (_t = t("common.approval", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
   }))), /*#__PURE__*/React.createElement(Form$3, {
     formikProps: {
       onSubmit: handleSubmit,
@@ -6300,7 +6107,7 @@ var publicRequestsApi = {
 };
 
 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$1(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 _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; }
 var useFetchPublicRequest = function useFetchPublicRequest(_ref, options) {
   var requestId = _ref.requestId;
   return useQuery([QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId], function () {
@@ -6335,6 +6142,7 @@ var useDeclinePendingRequest = function useDeclinePendingRequest(options) {
 };
 
 var Public = function Public() {
+  var _t;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     note = _useState2[0],
@@ -6369,7 +6177,7 @@ var Public = function Public() {
       className: "h-screen items-center justify-center"
     }, /*#__PURE__*/React.createElement(PageLoader, null));
   }
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header$2, {
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
     title: t("common.approval", PLURAL)
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center"
@@ -6384,7 +6192,7 @@ var Public = function Public() {
   }), !hideTextArea && /*#__PURE__*/React.createElement(Textarea, {
     label: t("common.note"),
     placeholder: t("inputs.placeholders.add_", {
-      what: t("common.note").toLocaleLowerCase()
+      what: (_t = t("common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     }),
     value: note,
     disabled: approvalRequest.status !== STATUSES.pending,
@@ -6427,7 +6235,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-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-wrapper{display:flex}.neeto-approvals-page-loader{height:100vh;width:100%}.neeto-approvals__table-wrapper{height:calc(100vh - 205px);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}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}";
+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-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}.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left{max-width:none}td.ant-table-column-sort{background:transparent}";
 n(css,{});
 
 export { Approvals, Form, Public };