@bigbinary/neeto-integrations-frontend 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { noop as noop$1, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
-import { Check, MenuVertical } from '@bigbinary/neeto-icons';
-import { Dropdown, Typography, Tag, Button, Modal as Modal$1 } from '@bigbinary/neetoui';
+import { noop as noop$1, isNotEmpty, isNotNil } from '@bigbinary/neeto-commons-frontend/pure';
+import { Check, MenuVertical, MenuHorizontal, Copy } from '@bigbinary/neeto-icons';
+import { Dropdown, Typography, Tag, Button, Modal as Modal$1, Table, Alert, Callout, Spinner } from '@bigbinary/neetoui';
+import { isEmpty } from 'ramda';
+import { timeFormat, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { Form, Input } from '@bigbinary/neetoui/formik';
+import * as Yup from 'yup';
 
-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 _classCallCheck$1(instance, Constructor) {
@@ -21,20 +25,20 @@ function _classCallCheck$1(instance, Constructor) {
   }
 }
 
-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) {
@@ -43,7 +47,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) {
@@ -88,7 +92,7 @@ function _inherits(subClass, superClass) {
 }
 
 function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof$1(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof$2(call) === "object" || typeof call === "function")) {
     return call;
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
@@ -103,8 +107,8 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
-function _defineProperty$1(obj, key, value) {
-  key = _toPropertyKey$1(key);
+function _defineProperty$2(obj, key, value) {
+  key = _toPropertyKey$2(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -118,7 +122,7 @@ function _defineProperty$1(obj, key, value) {
   return obj;
 }
 
-function _arrayWithHoles$1(arr) {
+function _arrayWithHoles$2(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
@@ -126,30 +130,30 @@ function _iterableToArray(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(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableRest$2();
 }
 
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$5(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -162,17 +166,17 @@ function ownKeys$2(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread$2(target) {
+function _objectSpread$5(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     if (i % 2) {
-      ownKeys$2(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+      ownKeys$5(Object(source), true).forEach(function (key) {
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$2(Object(source)).forEach(function (key) {
+      ownKeys$5(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -256,7 +260,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$2(_objectSpread$2({}, {
+      return new Logger(this.logger, _objectSpread$5(_objectSpread$5({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -459,7 +463,7 @@ function _objectSpread$1$1(target) {
     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]);
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -713,7 +717,7 @@ function _objectSpread$2$1(target) {
     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]);
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -818,7 +822,7 @@ var Translator = function (_EventEmitter) {
     key: "translate",
     value: function translate(keys, options, lastKey) {
       var _this2 = this;
-      if (_typeof$1(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
+      if (_typeof$2(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
         options = this.options.overloadTranslationOptionHandler(arguments);
       }
       if (!options) options = {};
@@ -1540,7 +1544,7 @@ var PluralResolver = function () {
   }]);
   return PluralResolver;
 }();
-function ownKeys$3(object, enumerableOnly) {
+function ownKeys$3$1(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -1553,17 +1557,17 @@ function ownKeys$3(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread$3(target) {
+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(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+      ownKeys$3$1(Object(source), true).forEach(function (key) {
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$3(Object(source)).forEach(function (key) {
+      ownKeys$3$1(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -1633,14 +1637,14 @@ var Interpolator = function () {
       var handleFormat = function handleFormat(key) {
         if (key.indexOf(_this.formatSeparator) < 0) {
           var path = getPathWithDefaults(data, defaultData, key);
-          return _this.alwaysFormat ? _this.format(path, undefined, lng, _objectSpread$3(_objectSpread$3(_objectSpread$3({}, options), data), {}, {
+          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(_objectSpread$3(_objectSpread$3({}, options), data), {}, {
+        return _this.format(getPathWithDefaults(data, defaultData, k), f, lng, _objectSpread$3$1(_objectSpread$3$1(_objectSpread$3$1({}, options), data), {}, {
           interpolationkey: k
         }));
       };
@@ -1702,7 +1706,7 @@ var Interpolator = function () {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var match;
       var value;
-      var clonedOptions = _objectSpread$3({}, options);
+      var clonedOptions = _objectSpread$3$1({}, options);
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
       function handleHasOptions(key, inheritedOptions) {
@@ -1715,7 +1719,7 @@ var Interpolator = function () {
         optionsString = optionsString.replace(/'/g, '"');
         try {
           clonedOptions = JSON.parse(optionsString);
-          if (inheritedOptions) clonedOptions = _objectSpread$3(_objectSpread$3({}, inheritedOptions), clonedOptions);
+          if (inheritedOptions) clonedOptions = _objectSpread$3$1(_objectSpread$3$1({}, inheritedOptions), clonedOptions);
         } catch (e) {
           this.logger.warn("failed parsing options string in nesting for key ".concat(key), e);
           return "".concat(key).concat(sep).concat(optionsString);
@@ -1743,7 +1747,7 @@ var Interpolator = function () {
         }
         if (doReduce) {
           value = formatters.reduce(function (v, f) {
-            return _this2.format(v, f, options.lng, _objectSpread$3(_objectSpread$3({}, options), {}, {
+            return _this2.format(v, f, options.lng, _objectSpread$3$1(_objectSpread$3$1({}, options), {}, {
               interpolationkey: match[1].trim()
             }));
           }, value.trim());
@@ -1756,7 +1760,7 @@ var Interpolator = function () {
   }]);
   return Interpolator;
 }();
-function ownKeys$4(object, enumerableOnly) {
+function ownKeys$4$1(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -1769,17 +1773,17 @@ function ownKeys$4(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread$4(target) {
+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(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+      ownKeys$4$1(Object(source), true).forEach(function (key) {
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$4(Object(source)).forEach(function (key) {
+      ownKeys$4$1(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -1829,18 +1833,18 @@ var Formatter = function () {
         return new Intl.NumberFormat(lng, options).format(val);
       },
       currency: function currency(val, lng, options) {
-        return new Intl.NumberFormat(lng, _objectSpread$4(_objectSpread$4({}, options), {}, {
+        return new Intl.NumberFormat(lng, _objectSpread$4$1(_objectSpread$4$1({}, options), {}, {
           style: 'currency'
         })).format(val);
       },
       datetime: function datetime(val, lng, options) {
-        return new Intl.DateTimeFormat(lng, _objectSpread$4({}, options)).format(val);
+        return new Intl.DateTimeFormat(lng, _objectSpread$4$1({}, options)).format(val);
       },
       relativetime: function relativetime(val, lng, options) {
-        return new Intl.RelativeTimeFormat(lng, _objectSpread$4({}, options)).format(val, options.range || 'day');
+        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({}, options)).format(val);
+        return new Intl.ListFormat(lng, _objectSpread$4$1({}, options)).format(val);
       }
     };
     this.init(options);
@@ -1873,7 +1877,7 @@ var Formatter = function () {
           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(_objectSpread$4(_objectSpread$4({}, formatOptions), options), valOptions));
+            formatted = _this.formats[formatName](mem, l, _objectSpread$4$1(_objectSpread$4$1(_objectSpread$4$1({}, formatOptions), options), valOptions));
           } catch (error) {
             _this.logger.warn(error);
           }
@@ -1888,7 +1892,7 @@ var Formatter = function () {
   }]);
   return Formatter;
 }();
-function ownKeys$5(object, enumerableOnly) {
+function ownKeys$5$1(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -1901,17 +1905,17 @@ function ownKeys$5(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread$5(target) {
+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(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+      ownKeys$5$1(Object(source), true).forEach(function (key) {
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$5(Object(source)).forEach(function (key) {
+      ownKeys$5$1(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -2128,7 +2132,7 @@ var Connector = function (_EventEmitter) {
       }
       if (key === undefined || key === null || key === '') return;
       if (this.backend && this.backend.create) {
-        this.backend.create(languages, namespace, key, fallbackValue, null, _objectSpread$5(_objectSpread$5({}, options), {}, {
+        this.backend.create(languages, namespace, key, fallbackValue, null, _objectSpread$5$1(_objectSpread$5$1({}, options), {}, {
           isUpdate: isUpdate
         }));
       }
@@ -2174,10 +2178,10 @@ function get() {
     appendNamespaceToCIMode: false,
     overloadTranslationOptionHandler: function handle(args) {
       var ret = {};
-      if (_typeof$1(args[1]) === 'object') ret = args[1];
+      if (_typeof$2(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$1(args[2]) === 'object' || _typeof$1(args[3]) === 'object') {
+      if (_typeof$2(args[2]) === 'object' || _typeof$2(args[3]) === 'object') {
         var options = args[3] || args[2];
         Object.keys(options).forEach(function (key) {
           ret[key] = options[key];
@@ -2229,7 +2233,7 @@ function _objectSpread$6(target) {
     var source = arguments[i] != null ? arguments[i] : {};
     if (i % 2) {
       ownKeys$6(Object(source), true).forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
+        _defineProperty$2(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
@@ -2593,7 +2597,7 @@ var I18n = function (_EventEmitter) {
       var _this5 = this;
       var fixedT = function fixedT(key, opts) {
         var options;
-        if (_typeof$1(opts) !== 'object') {
+        if (_typeof$2(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];
           }
@@ -2757,7 +2761,7 @@ 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);
@@ -2778,34 +2782,63 @@ instance.hasLoadedNamespace;
 instance.loadNamespaces;
 instance.loadLanguages;
 
-function _typeof(obj) {
+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;
+}
+
+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,
@@ -2819,6 +2852,161 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+/**
+ * This file automatically generated from `pre-publish.js`.
+ * Do not manually edit.
+ */
+var voidElements = {
+  "area": true,
+  "base": true,
+  "br": true,
+  "col": true,
+  "embed": true,
+  "hr": true,
+  "img": true,
+  "input": true,
+  "link": true,
+  "meta": true,
+  "param": true,
+  "source": true,
+  "track": true,
+  "wbr": true
+};
+
+var t$1 = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+function n$1(n) {
+  var r = {
+      type: "tag",
+      name: "",
+      voidElement: !1,
+      attrs: {},
+      children: []
+    },
+    i = n.match(/<\/?([^\s]+?)[/\s>]/);
+  if (i && (r.name = i[1], (voidElements[i[1]] || "/" === n.charAt(n.length - 2)) && (r.voidElement = !0), r.name.startsWith("!--"))) {
+    var s = n.indexOf("--\x3e");
+    return {
+      type: "comment",
+      comment: -1 !== s ? n.slice(4, s) : ""
+    };
+  }
+  for (var a = new RegExp(t$1), c = null; null !== (c = a.exec(n));) if (c[0].trim()) if (c[1]) {
+    var o = c[1].trim(),
+      l = [o, ""];
+    o.indexOf("=") > -1 && (l = o.split("=")), r.attrs[l[0]] = l[1], a.lastIndex--;
+  } else c[2] && (r.attrs[c[2]] = c[3].trim().substring(1, c[3].length - 1));
+  return r;
+}
+var r = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,
+  i = /^\s*$/,
+  s = Object.create(null);
+function a(e, t) {
+  switch (t.type) {
+    case "text":
+      return e + t.content;
+    case "tag":
+      return e += "<" + t.name + (t.attrs ? function (e) {
+        var t = [];
+        for (var n in e) t.push(n + '="' + e[n] + '"');
+        return t.length ? " " + t.join(" ") : "";
+      }(t.attrs) : "") + (t.voidElement ? "/>" : ">"), t.voidElement ? e : e + t.children.reduce(a, "") + "</" + t.name + ">";
+    case "comment":
+      return e + "\x3c!--" + t.comment + "--\x3e";
+  }
+}
+var c = {
+  parse: function parse(e, t) {
+    t || (t = {}), t.components || (t.components = s);
+    var a,
+      c = [],
+      o = [],
+      l = -1,
+      m = !1;
+    if (0 !== e.indexOf("<")) {
+      var u = e.indexOf("<");
+      c.push({
+        type: "text",
+        content: -1 === u ? e : e.substring(0, u)
+      });
+    }
+    return e.replace(r, function (r, s) {
+      if (m) {
+        if (r !== "</" + a.name + ">") return;
+        m = !1;
+      }
+      var u,
+        f = "/" !== r.charAt(1),
+        h = r.startsWith("\x3c!--"),
+        p = s + r.length,
+        d = e.charAt(p);
+      if (h) {
+        var v = n$1(r);
+        return l < 0 ? (c.push(v), c) : ((u = o[l]).children.push(v), c);
+      }
+      if (f && (l++, "tag" === (a = n$1(r)).type && t.components[a.name] && (a.type = "component", m = !0), a.voidElement || m || !d || "<" === d || a.children.push({
+        type: "text",
+        content: e.slice(p, e.indexOf("<", p))
+      }), 0 === l && c.push(a), (u = o[l - 1]) && u.children.push(a), o[l] = a), (!f || a.voidElement) && (l > -1 && (a.voidElement || a.name === r.slice(2, -1)) && (l--, a = -1 === l ? c : o[l]), !m && "<" !== d && d)) {
+        u = -1 === l ? c : o[l].children;
+        var x = e.indexOf("<", p),
+          g = e.slice(p, -1 === x ? void 0 : x);
+        i.test(g) && (g = " "), (x > -1 && l + u.length >= 0 || " " !== g) && u.push({
+          type: "text",
+          content: g
+        });
+      }
+    }), c;
+  },
+  stringify: function stringify(e) {
+    return e.reduce(function (e, t) {
+      return e + a("", t);
+    }, "");
+  }
+};
+
+/**
+ * Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+var replace = ''.replace;
+var es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+var unes = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"'
+};
+function unescape(un) {
+  return replace.call(un, es, cape);
+}
+function cape(m) {
+  return unes[m];
+}
+
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -2831,7 +3019,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) {
@@ -2843,7 +3031,7 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
-function ownKeys$1(object, enumerableOnly) {
+function ownKeys$4(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -2856,17 +3044,17 @@ function ownKeys$1(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread$1(target) {
+function _objectSpread$4(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     if (i % 2) {
-      ownKeys$1(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
+      ownKeys$4(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(Object(source)).forEach(function (key) {
+      ownKeys$4(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -2886,7 +3074,7 @@ var i18nInstance;
 var I18nContext = /*#__PURE__*/React__default.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$1(_objectSpread$1({}, defaultOptions), options);
+  defaultOptions = _objectSpread$4(_objectSpread$4({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -2993,11 +3181,268 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-function _arrayWithHoles(arr) {
+var _excluded = ["format"],
+  _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
+function ownKeys$3(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(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys$3(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(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function hasChildren(node, checkLength) {
+  if (!node) return false;
+  var base = node.props ? node.props.children : node.children;
+  if (checkLength) return base.length > 0;
+  return !!base;
+}
+function getChildren(node) {
+  if (!node) return [];
+  return node && node.children ? node.children : node.props && node.props.children;
+}
+function hasValidReactChildren(children) {
+  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
+  return children.every(function (child) {
+    return /*#__PURE__*/React__default.isValidElement(child);
+  });
+}
+function getAsArray(data) {
+  return Array.isArray(data) ? data : [data];
+}
+function mergeProps(source, target) {
+  var newTarget = _objectSpread$3({}, target);
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+function nodesToString(children, i18nOptions) {
+  if (!children) return '';
+  var stringNode = '';
+  var childrenArray = getAsArray(children);
+  var keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];
+  childrenArray.forEach(function (child, childIndex) {
+    if (typeof child === 'string') {
+      stringNode += "".concat(child);
+    } else if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      var childPropsCount = Object.keys(child.props).length;
+      var shouldKeepChild = keepArray.indexOf(child.type) > -1;
+      var childChildren = child.props.children;
+      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+        stringNode += "<".concat(child.type, "/>");
+      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (child.props.i18nIsDynamicList) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+        stringNode += "<".concat(child.type, ">").concat(childChildren, "</").concat(child.type, ">");
+      } else {
+        var content = nodesToString(childChildren, i18nOptions);
+        stringNode += "<".concat(childIndex, ">").concat(content, "</").concat(childIndex, ">");
+      }
+    } else if (child === null) {
+      warn("Trans: the passed in value is invalid - seems you passed in a null child.");
+    } else if (_typeof$1(child) === 'object') {
+      var format = child.format,
+        clone = _objectWithoutProperties(child, _excluded);
+      var keys = Object.keys(clone);
+      if (keys.length === 1) {
+        var value = format ? "".concat(keys[0], ", ").concat(format) : keys[0];
+        stringNode += "{{".concat(value, "}}");
+      } else {
+        warn("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", child);
+      }
+    } else {
+      warn("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", child);
+    }
+  });
+  return stringNode;
+}
+function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+  if (targetString === '') return [];
+  var keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
+  var emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);
+  if (!children && !emptyChildrenButNeedsHandling) return [targetString];
+  var data = {};
+  function getData(childs) {
+    var childrenArray = getAsArray(childs);
+    childrenArray.forEach(function (child) {
+      if (typeof child === 'string') return;
+      if (hasChildren(child)) getData(getChildren(child));else if (_typeof$1(child) === 'object' && ! /*#__PURE__*/React__default.isValidElement(child)) Object.assign(data, child);
+    });
+  }
+  getData(children);
+  var ast = c.parse("<0>".concat(targetString, "</0>"));
+  var opts = _objectSpread$3(_objectSpread$3({}, data), combinedTOpts);
+  function renderInner(child, node, rootReactNode) {
+    var childs = getChildren(child);
+    var mappedChildren = mapAST(childs, node.children, rootReactNode);
+    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+  }
+  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+    if (child.dummy) child.children = inner;
+    mem.push( /*#__PURE__*/React__default.cloneElement(child, _objectSpread$3(_objectSpread$3({}, child.props), {}, {
+      key: i
+    }), isVoid ? undefined : inner));
+  }
+  function mapAST(reactNode, astNode, rootReactNode) {
+    var reactNodes = getAsArray(reactNode);
+    var astNodes = getAsArray(astNode);
+    return astNodes.reduce(function (mem, node, i) {
+      var translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);
+      if (node.type === 'tag') {
+        var tmp = reactNodes[parseInt(node.name, 10)];
+        if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];
+        if (!tmp) tmp = {};
+        var child = Object.keys(node.attrs).length !== 0 ? mergeProps({
+          props: node.attrs
+        }, tmp) : tmp;
+        var isElement = /*#__PURE__*/React__default.isValidElement(child);
+        var isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
+        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);
+          mem.push(value);
+        } else if (hasChildren(child) || isValidTranslationWithChildren) {
+          var inner = renderInner(child, node, rootReactNode);
+          pushTranslatedJSX(child, inner, mem, i);
+        } else if (isEmptyTransWithHTML) {
+          var _inner = mapAST(reactNodes, node.children, rootReactNode);
+          mem.push( /*#__PURE__*/React__default.cloneElement(child, _objectSpread$3(_objectSpread$3({}, child.props), {}, {
+            key: i
+          }), _inner));
+        } else if (Number.isNaN(parseFloat(node.name))) {
+          if (isKnownComponent) {
+            var _inner2 = renderInner(child, node, rootReactNode);
+            pushTranslatedJSX(child, _inner2, mem, i, node.voidElement);
+          } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push( /*#__PURE__*/React__default.createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }));
+            } else {
+              var _inner3 = mapAST(reactNodes, node.children, rootReactNode);
+              mem.push( /*#__PURE__*/React__default.createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }, _inner3));
+            }
+          } else if (node.voidElement) {
+            mem.push("<".concat(node.name, " />"));
+          } else {
+            var _inner4 = mapAST(reactNodes, node.children, rootReactNode);
+            mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
+          }
+        } 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( /*#__PURE__*/React__default.cloneElement(child, _objectSpread$3(_objectSpread$3({}, child.props), {}, {
+            key: i
+          }), translationContent));
+        } else {
+          mem.push( /*#__PURE__*/React__default.cloneElement(child, _objectSpread$3(_objectSpread$3({}, child.props), {}, {
+            key: i
+          })));
+        }
+      } else if (node.type === 'text') {
+        var wrapTextNodes = i18nOptions.transWrapTextNodes;
+        var _content = shouldUnescape ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+        if (wrapTextNodes) {
+          mem.push( /*#__PURE__*/React__default.createElement(wrapTextNodes, {
+            key: "".concat(node.name, "-").concat(i)
+          }, _content));
+        } else {
+          mem.push(_content);
+        }
+      }
+      return mem;
+    }, []);
+  }
+  var result = mapAST([{
+    dummy: true,
+    children: children || []
+  }], ast, getAsArray(children || []));
+  return getChildren(result[0]);
+}
+function Trans(_ref) {
+  var children = _ref.children,
+    count = _ref.count,
+    parent = _ref.parent,
+    i18nKey = _ref.i18nKey,
+    context = _ref.context,
+    _ref$tOptions = _ref.tOptions,
+    tOptions = _ref$tOptions === void 0 ? {} : _ref$tOptions,
+    values = _ref.values,
+    defaults = _ref.defaults,
+    components = _ref.components,
+    ns = _ref.ns,
+    i18nFromProps = _ref.i18n,
+    tFromProps = _ref.t,
+    shouldUnescape = _ref.shouldUnescape,
+    additionalProps = _objectWithoutProperties(_ref, _excluded2);
+  var _ref2 = useContext(I18nContext) || {},
+    i18nFromContext = _ref2.i18n,
+    defaultNSFromContext = _ref2.defaultNS;
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');
+    return children;
+  }
+  var t = tFromProps || i18n.t.bind(i18n) || function (k) {
+    return k;
+  };
+  if (context) tOptions.context = context;
+  var reactI18nextOptions = _objectSpread$3(_objectSpread$3({}, getDefaults()), i18n.options && i18n.options.react);
+  var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  var defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;
+  var hashTransKey = reactI18nextOptions.hashTransKey;
+  var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  var interpolationOverride = values ? tOptions.interpolation : {
+    interpolation: _objectSpread$3(_objectSpread$3({}, tOptions.interpolation), {}, {
+      prefix: '#$?',
+      suffix: '?$#'
+    })
+  };
+  var combinedTOpts = _objectSpread$3(_objectSpread$3(_objectSpread$3(_objectSpread$3({}, tOptions), {}, {
+    count: count
+  }, values), interpolationOverride), {}, {
+    defaultValue: defaultValue,
+    ns: namespaces
+  });
+  var translation = key ? t(key, combinedTOpts) : defaultValue;
+  var content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
+  var useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
+  return useAsParent ? /*#__PURE__*/React__default.createElement(useAsParent, additionalProps, content) : content;
+}
+
+function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
+function _iterableToArrayLimit$1(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
     var _s,
@@ -3025,30 +3470,30 @@ function _iterableToArrayLimit(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(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+function _slicedToArray$1(arr, i) {
+  return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
 }
 
-function ownKeys(object, enumerableOnly) {
+function ownKeys$2(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -3061,17 +3506,17 @@ function ownKeys(object, enumerableOnly) {
   }
   return keys;
 }
-function _objectSpread(target) {
+function _objectSpread$2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
+      ownKeys$2(Object(source), true).forEach(function (key) {
+        _defineProperty$1(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys(Object(source)).forEach(function (key) {
+      ownKeys$2(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -3098,7 +3543,7 @@ function useTranslation(ns) {
     return retNotReady;
   }
   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(_objectSpread(_objectSpread({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$2(_objectSpread$2(_objectSpread$2({}, getDefaults()), i18n.options.react), props);
   var useSuspense = i18nOptions.useSuspense,
     keyPrefix = i18nOptions.keyPrefix;
   var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
@@ -3111,7 +3556,7 @@ function useTranslation(ns) {
     return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
   }
   var _useState = useState(getT),
-    _useState2 = _slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray$1(_useState, 2),
     t = _useState2[0],
     setT = _useState2[1];
   var isMounted = useRef(true);
@@ -3165,16 +3610,37 @@ var common = {
 	connected: "Connected",
 	manage: "Manage",
 	disconnect: "Disconnect",
-	finish: "Finish"
+	finish: "Finish",
+	required: "Required",
+	"delete": "Delete"
 };
 var demo = {
 	title: "Check how it behaves",
 	subtitle: "Watch the following video to understand how you can utilize this integration:",
 	iFrameTitle: "Watch this video to utilize the integration"
 };
+var zapier = {
+	apiKeys: "API Keys",
+	copyApiKey: "Copy API Key to Clipboard",
+	emptyText: "Generate an API Key to connect to the Zapier platform",
+	generateApiKey: "Generate API Key",
+	labelInputPlaceholder: "Enter a Label for the new API Key",
+	tableColumns: {
+		createdAt: "Created At",
+		label: "Label"
+	},
+	newApiKeyInstruction: "Here is your Zapier API Key. Make sure to copy the API Key now. It will not be made visible again.",
+	tableTitle: "Previously Generated API Keys",
+	deleteApiKey: {
+		title: "Delete API Key?",
+		message: "You are permanently deleting the API Key <strong>{{key}}</strong>. This can't be undone."
+	},
+	walkthroughText: "Check how it behaves"
+};
 var en = {
 	common: common,
-	demo: demo
+	demo: demo,
+	zapier: zapier
 };
 
 instance.use(initReactI18next).init({
@@ -3191,8 +3657,8 @@ instance.use(initReactI18next).init({
   }
 });
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
+var Menu$1 = Dropdown.Menu,
+  MenuItem$1 = Dropdown.MenuItem;
 var Card = function Card(_ref) {
   var label = _ref.label,
     description = _ref.description,
@@ -3241,9 +3707,9 @@ var Card = function Card(_ref) {
   }), customDropdown || /*#__PURE__*/React__default.createElement(Dropdown, {
     buttonStyle: "text",
     icon: MenuVertical
-  }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+  }, /*#__PURE__*/React__default.createElement(Menu$1, null, /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
     onClick: onManage
-  }, t("common.manage")), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+  }, t("common.manage")), /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
     onClick: onDisconnect
   }, t("common.disconnect"))))) : /*#__PURE__*/React__default.createElement(Button, {
     label: !isStatusLoading && t("common.connect"),
@@ -3555,6 +4021,8 @@ var Finish = function Finish(_ref) {
     onClick = _ref$onClick === void 0 ? noop$1 : _ref$onClick,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$buttonProps = _ref.buttonProps,
+    buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     _ref$secondaryButtonP = _ref.secondaryButtonProps,
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP,
     children = _ref.children;
@@ -3568,10 +4036,10 @@ var Finish = function Finish(_ref) {
     weight: "semibold"
   }, title), children, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-full items-start space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
     label: t("common.continue"),
     onClick: onClick
-  }), isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default.createElement(Button, _extends$1({
+  }, buttonProps)), isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default.createElement(Button, _extends$1({
     style: "secondary"
   }, secondaryButtonProps))));
 };
@@ -3584,12 +4052,336 @@ Finish.prototypes = {
    * To show the title of the Finish component
    */
   title: propTypes.exports.string,
+  /**
+   * To specify props for primary button
+   */
+  buttonProps: propTypes.exports.object,
   /**
    * To specify props for secondary button
    */
   secondaryButtonProps: propTypes.exports.object
 };
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+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(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+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;
+}
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var Actions = function Actions(_ref) {
+  var apiKey = _ref.apiKey,
+    setApiKeyToDelete = _ref.setApiKeyToDelete;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default.createElement(Dropdown, {
+    buttonStyle: "text",
+    icon: MenuHorizontal,
+    strategy: "fixed"
+  }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
+    "data-cy": "delete-apikey-button",
+    onClick: function onClick() {
+      return setApiKeyToDelete(apiKey);
+    }
+  }, t("common.delete"))));
+};
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var getApiKeysTableColumnData = function getApiKeysTableColumnData() {
+  return [{
+    title: instance.t("zapier.tableColumns.label"),
+    dataIndex: "options",
+    key: "options",
+    width: 272,
+    render: function render(options, _ref) {
+      var actions = _ref.actions;
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default.createElement(Typography, {
+        className: "w-4/5",
+        style: "body2"
+      }, options === null || options === void 0 ? void 0 : options.label), actions);
+    }
+  }, {
+    title: instance.t("zapier.tableColumns.createdAt"),
+    dataIndex: "createdAt",
+    key: "createdAt"
+  }];
+};
+var getApiKeysTableRowData = function getApiKeysTableRowData(_ref2) {
+  var apiKeys = _ref2.apiKeys,
+    setApiKeyToDelete = _ref2.setApiKeyToDelete;
+  return apiKeys.map(function (apiKey) {
+    return _objectSpread$1(_objectSpread$1({}, apiKey), {}, {
+      createdAt: timeFormat.fromNow(apiKey.createdAt),
+      actions: /*#__PURE__*/React__default.createElement(Actions, {
+        apiKey: apiKey,
+        setApiKeyToDelete: setApiKeyToDelete
+      })
+    });
+  });
+};
+
+var ApiKeysList = function ApiKeysList(_ref) {
+  var _apiKeyToDelete$optio;
+  var _ref$apiKeys = _ref.apiKeys,
+    apiKeys = _ref$apiKeys === void 0 ? [] : _ref$apiKeys,
+    _ref$deleteApiKey = _ref.deleteApiKey,
+    deleteApiKey = _ref$deleteApiKey === void 0 ? noop$1 : _ref$deleteApiKey,
+    _ref$isDeleting = _ref.isDeleting,
+    isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
+    _ref$setNewZapierApiK = _ref.setNewZapierApiKey,
+    setNewZapierApiKey = _ref$setNewZapierApiK === void 0 ? noop$1 : _ref$setNewZapierApiK;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    apiKeyToDelete = _useState2[0],
+    setApiKeyToDelete = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var closeAlert = function closeAlert() {
+    return setApiKeyToDelete(null);
+  };
+  var handleSubmit = function handleSubmit() {
+    deleteApiKey(apiKeyToDelete === null || apiKeyToDelete === void 0 ? void 0 : apiKeyToDelete.id, {
+      onSuccess: function onSuccess() {
+        closeAlert();
+        setNewZapierApiKey("");
+      }
+    });
+  };
+  if (isEmpty(apiKeys)) return null;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h3"
+  }, t("zapier.tableTitle")), /*#__PURE__*/React__default.createElement(Table, {
+    fixedHeight: true,
+    allowRowClick: false,
+    columnData: getApiKeysTableColumnData(),
+    rowData: getApiKeysTableRowData({
+      apiKeys: apiKeys,
+      setApiKeyToDelete: setApiKeyToDelete
+    })
+  })), /*#__PURE__*/React__default.createElement(Alert, {
+    backdropClassName: "zapier-delete-alert",
+    isOpen: isNotNil(apiKeyToDelete),
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("common.delete"),
+    title: t("zapier.deleteApiKey.title"),
+    message: /*#__PURE__*/React__default.createElement(Trans, {
+      i18nKey: "zapier.deleteApiKey.message",
+      values: {
+        key: apiKeyToDelete === null || apiKeyToDelete === void 0 ? void 0 : (_apiKeyToDelete$optio = apiKeyToDelete.options) === null || _apiKeyToDelete$optio === void 0 ? void 0 : _apiKeyToDelete$optio.label
+      }
+    }),
+    onClose: closeAlert,
+    onSubmit: handleSubmit
+  }));
+};
+
+var GENERATE_API_KEY_VALIDATION = Yup.object({
+  label: Yup.string().required(instance.t("common.required"))
+});
+var GENERATE_API_KEY_FORMIK_PROPS = {
+  initialValues: {
+    label: ""
+  },
+  validationSchema: GENERATE_API_KEY_VALIDATION
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var GenerateKey = function GenerateKey(_ref) {
+  var handleSubmit = _ref.handleSubmit,
+    isLoading = _ref.isLoading;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Form, {
+    formikProps: _objectSpread(_objectSpread({}, GENERATE_API_KEY_FORMIK_PROPS), {}, {
+      onSubmit: handleSubmit
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    name: "label",
+    placeholder: t("zapier.labelInputPlaceholder"),
+    ref: inputRef
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    label: t("zapier.generateApiKey"),
+    loading: isLoading,
+    type: "submit"
+  })));
+};
+
+var NewZapierApiKey = function NewZapierApiKey(_ref) {
+  var apiKey = _ref.apiKey;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-8 space-y-2"
+  }, /*#__PURE__*/React__default.createElement(Callout, null, t("zapier.newApiKeyInstruction")), /*#__PURE__*/React__default.createElement(Callout, {
+    className: "flex justify-between",
+    style: "success"
+  }, apiKey, /*#__PURE__*/React__default.createElement(Button, {
+    icon: Copy,
+    style: "text",
+    tooltipProps: {
+      content: t("zapier.copyApiKey")
+    },
+    onClick: function onClick() {
+      return copyToClipboard(apiKey);
+    }
+  })));
+};
+
+var ZapierForm = function ZapierForm(_ref) {
+  var _ref$newZapierApiKey = _ref.newZapierApiKey,
+    newZapierApiKey = _ref$newZapierApiKey === void 0 ? "" : _ref$newZapierApiKey,
+    _ref$videoUrl = _ref.videoUrl,
+    videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
+    _ref$zapierApiKeys = _ref.zapierApiKeys,
+    zapierApiKeys = _ref$zapierApiKeys === void 0 ? [] : _ref$zapierApiKeys,
+    _ref$isGenerating = _ref.isGenerating,
+    isGenerating = _ref$isGenerating === void 0 ? false : _ref$isGenerating,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
+    _ref$isDeleting = _ref.isDeleting,
+    isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
+    _ref$deleteApiKey = _ref.deleteApiKey,
+    deleteApiKey = _ref$deleteApiKey === void 0 ? noop$1 : _ref$deleteApiKey,
+    _ref$handleGenerateAp = _ref.handleGenerateApiKey,
+    handleGenerateApiKey = _ref$handleGenerateAp === void 0 ? noop$1 : _ref$handleGenerateAp,
+    _ref$setNewZapierApiK = _ref.setNewZapierApiKey,
+    setNewZapierApiKey = _ref$setNewZapierApiK === void 0 ? noop$1 : _ref$setNewZapierApiK,
+    _ref$setIsDemoModalOp = _ref.setIsDemoModalOpen,
+    setIsDemoModalOpen = _ref$setIsDemoModalOp === void 0 ? noop$1 : _ref$setIsDemoModalOp;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isLoading) return /*#__PURE__*/React__default.createElement(Spinner, null);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full max-w-xl space-y-10 p-10"
+  }, isNotEmpty(newZapierApiKey) && /*#__PURE__*/React__default.createElement(NewZapierApiKey, {
+    apiKey: newZapierApiKey
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h2"
+  }, t("zapier.apiKeys")), isEmpty(zapierApiKeys) && /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h4"
+  }, t("zapier.emptyText")), /*#__PURE__*/React__default.createElement(GenerateKey, {
+    handleSubmit: handleGenerateApiKey,
+    isLoading: isGenerating
+  }), /*#__PURE__*/React__default.createElement(ApiKeysList, {
+    apiKeys: zapierApiKeys,
+    deleteApiKey: deleteApiKey,
+    isDeleting: isDeleting,
+    setNewZapierApiKey: setNewZapierApiKey
+  }), isNotEmpty(videoUrl) && /*#__PURE__*/React__default.createElement(Button, {
+    className: "mb-6",
+    label: t("zapier.walkthroughText"),
+    style: "link",
+    onClick: function onClick() {
+      return setIsDemoModalOpen(true);
+    }
+  }));
+};
+
 var e = [],
   t = [];
 function n(n, r) {
@@ -3615,5 +4407,5 @@ function n(n, r) {
 var css = ".w-screen-imp{width:100vw!important}.intrinsic-container{height:0;overflow:hidden;position:relative}.intrinsic-container-16x9{padding-bottom:56.25%}.intrinsic-container-4x3{padding-bottom:75%}.intrinsic-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}";
 n(css,{});
 
-export { Card, Connect, Demo, Finish, Modal };
+export { Card, Connect, Demo, Finish, Modal, ZapierForm };
 //# sourceMappingURL=index.js.map