react-input-emoji 5.5.1 → 5.6.1

package/dist/index.js

@@ -13,15 +13,12 @@ var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-
   if (!css || typeof document === 'undefined') {
     return;
   }
-
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
   style.type = 'text/css';
-
   if (insertAt === 'top') {
     if (head.firstChild) {
       head.insertBefore(style, head.firstChild);
@@ -31,7 +28,6 @@ function styleInject(css, ref) {
   } else {
     head.appendChild(style);
   }
-
   if (style.styleSheet) {
     style.styleSheet.cssText = css;
   } else {
@@ -42,377 +38,355 @@ function styleInject(css, ref) {
 var css_248z = ".react-input-emoji--container {\n  color: #4b4b4b;\n  text-rendering: optimizeLegibility;\n  background-color: #fff;\n  border: 1px solid #fff;\n  border-radius: 21px;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  font-size: 15px;\n  font-family: sans-serif;\n  font-weight: 400;\n  line-height: 20px;\n  min-height: 20px;\n  min-width: 0;\n  outline: none;\n  width: inherit;\n  will-change: width;\n  vertical-align: baseline;\n  border: 1px solid #eaeaea;\n  margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n  display: flex;\n  overflow: hidden;\n  flex: 1;\n  position: relative;\n  padding-right: 0;\n  vertical-align: baseline;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.react-input-emoji--input {\n  font-weight: 400;\n  max-height: 100px;\n  min-height: 20px;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  z-index: 1;\n  width: 100%;\n  user-select: text;\n  padding: 9px 12px 11px;\n  text-align: left;\n}\n\n.react-input-emoji--input img {\n  vertical-align: middle;\n  width: 18px !important;\n  height: 18px !important;\n  display: inline !important;\n  margin-left: 1px;\n  margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n  color: #a0a0a0;\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  z-index: 2;\n  left: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n  position: relative;\n  display: block;\n  text-align: center;\n  padding: 0 10px;\n  overflow: hidden;\n  transition: color 0.1s ease-out;\n  margin: 0;\n  box-shadow: none;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n  fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n  fill: #128b7e;\n}\n\n.react-emoji {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.react-emoji-picker--container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  height: 435px;\n  width: 352px;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.react-emoji-picker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n  top: 0;\n}\n\n.react-input-emoji--mention--container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n}\n\n.react-input-emoji--mention--item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 10px;\n  background-color: transparent;\n  width: 100%;\n  margin: 0;\n  border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n  background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n  font-size: 16px;\n  color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n  color: green;\n}\n\n.react-input-emoji--mention--text {\n  color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n  margin: 1px auto;\n  font-size: 2px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n  transform: translateZ(0);\n  animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes slidein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
 styleInject(css_248z);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   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);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-
-  return keys;
+  return t;
 }
-
-function _objectSpread2(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));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-
-  return target;
+  return e;
 }
-
 function _regeneratorRuntime() {
-  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
   _regeneratorRuntime = function () {
-    return exports;
+    return e;
   };
-
-  var exports = {},
-      Op = Object.prototype,
-      hasOwn = Op.hasOwnProperty,
-      $Symbol = "function" == typeof Symbol ? Symbol : {},
-      iteratorSymbol = $Symbol.iterator || "@@iterator",
-      asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
-      toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-
-  function define(obj, key, value) {
-    return Object.defineProperty(obj, key, {
-      value: value,
+  var t,
+    e = {},
+    r = Object.prototype,
+    n = r.hasOwnProperty,
+    o = Object.defineProperty || function (t, e, r) {
+      t[e] = r.value;
+    },
+    i = "function" == typeof Symbol ? Symbol : {},
+    a = i.iterator || "@@iterator",
+    c = i.asyncIterator || "@@asyncIterator",
+    u = i.toStringTag || "@@toStringTag";
+  function define(t, e, r) {
+    return Object.defineProperty(t, e, {
+      value: r,
       enumerable: !0,
       configurable: !0,
       writable: !0
-    }), obj[key];
+    }), t[e];
   }
-
   try {
     define({}, "");
-  } catch (err) {
-    define = function (obj, key, value) {
-      return obj[key] = value;
+  } catch (t) {
+    define = function (t, e, r) {
+      return t[e] = r;
     };
   }
-
-  function wrap(innerFn, outerFn, self, tryLocsList) {
-    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
-        generator = Object.create(protoGenerator.prototype),
-        context = new Context(tryLocsList || []);
-    return generator._invoke = function (innerFn, self, context) {
-      var state = "suspendedStart";
-      return function (method, arg) {
-        if ("executing" === state) throw new Error("Generator is already running");
-
-        if ("completed" === state) {
-          if ("throw" === method) throw arg;
-          return doneResult();
-        }
-
-        for (context.method = method, context.arg = arg;;) {
-          var delegate = context.delegate;
-
-          if (delegate) {
-            var delegateResult = maybeInvokeDelegate(delegate, context);
-
-            if (delegateResult) {
-              if (delegateResult === ContinueSentinel) continue;
-              return delegateResult;
-            }
-          }
-
-          if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
-            if ("suspendedStart" === state) throw state = "completed", context.arg;
-            context.dispatchException(context.arg);
-          } else "return" === context.method && context.abrupt("return", context.arg);
-          state = "executing";
-          var record = tryCatch(innerFn, self, context);
-
-          if ("normal" === record.type) {
-            if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
-            return {
-              value: record.arg,
-              done: context.done
-            };
-          }
-
-          "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
-        }
-      };
-    }(innerFn, self, context), generator;
+  function wrap(t, e, r, n) {
+    var i = e && e.prototype instanceof Generator ? e : Generator,
+      a = Object.create(i.prototype),
+      c = new Context(n || []);
+    return o(a, "_invoke", {
+      value: makeInvokeMethod(t, r, c)
+    }), a;
   }
-
-  function tryCatch(fn, obj, arg) {
+  function tryCatch(t, e, r) {
     try {
       return {
         type: "normal",
-        arg: fn.call(obj, arg)
+        arg: t.call(e, r)
       };
-    } catch (err) {
+    } catch (t) {
       return {
         type: "throw",
-        arg: err
+        arg: t
       };
     }
   }
-
-  exports.wrap = wrap;
-  var ContinueSentinel = {};
-
+  e.wrap = wrap;
+  var h = "suspendedStart",
+    l = "suspendedYield",
+    f = "executing",
+    s = "completed",
+    y = {};
   function Generator() {}
-
   function GeneratorFunction() {}
-
   function GeneratorFunctionPrototype() {}
-
-  var IteratorPrototype = {};
-  define(IteratorPrototype, iteratorSymbol, function () {
+  var p = {};
+  define(p, a, function () {
     return this;
   });
-  var getProto = Object.getPrototypeOf,
-      NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
-  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-
-  function defineIteratorMethods(prototype) {
-    ["next", "throw", "return"].forEach(function (method) {
-      define(prototype, method, function (arg) {
-        return this._invoke(method, arg);
+  var d = Object.getPrototypeOf,
+    v = d && d(d(values([])));
+  v && v !== r && n.call(v, a) && (p = v);
+  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+  function defineIteratorMethods(t) {
+    ["next", "throw", "return"].forEach(function (e) {
+      define(t, e, function (t) {
+        return this._invoke(e, t);
       });
     });
   }
-
-  function AsyncIterator(generator, PromiseImpl) {
-    function invoke(method, arg, resolve, reject) {
-      var record = tryCatch(generator[method], generator, arg);
-
-      if ("throw" !== record.type) {
-        var result = record.arg,
-            value = result.value;
-        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
-          invoke("next", value, resolve, reject);
-        }, function (err) {
-          invoke("throw", err, resolve, reject);
-        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
-          result.value = unwrapped, resolve(result);
-        }, function (error) {
-          return invoke("throw", error, resolve, reject);
+  function AsyncIterator(t, e) {
+    function invoke(r, o, i, a) {
+      var c = tryCatch(t[r], t, o);
+      if ("throw" !== c.type) {
+        var u = c.arg,
+          h = u.value;
+        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+          invoke("next", t, i, a);
+        }, function (t) {
+          invoke("throw", t, i, a);
+        }) : e.resolve(h).then(function (t) {
+          u.value = t, i(u);
+        }, function (t) {
+          return invoke("throw", t, i, a);
         });
       }
-
-      reject(record.arg);
+      a(c.arg);
     }
-
-    var previousPromise;
-
-    this._invoke = function (method, arg) {
-      function callInvokeWithMethodAndArg() {
-        return new PromiseImpl(function (resolve, reject) {
-          invoke(method, arg, resolve, reject);
-        });
+    var r;
+    o(this, "_invoke", {
+      value: function (t, n) {
+        function callInvokeWithMethodAndArg() {
+          return new e(function (e, r) {
+            invoke(t, n, e, r);
+          });
+        }
+        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
       }
-
-      return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-    };
+    });
   }
-
-  function maybeInvokeDelegate(delegate, context) {
-    var method = delegate.iterator[context.method];
-
-    if (undefined === method) {
-      if (context.delegate = null, "throw" === context.method) {
-        if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
-        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
+  function makeInvokeMethod(e, r, n) {
+    var o = h;
+    return function (i, a) {
+      if (o === f) throw new Error("Generator is already running");
+      if (o === s) {
+        if ("throw" === i) throw a;
+        return {
+          value: t,
+          done: !0
+        };
       }
-
-      return ContinueSentinel;
-    }
-
-    var record = tryCatch(method, delegate.iterator, context.arg);
-    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
-    var info = record.arg;
-    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+      for (n.method = i, n.arg = a;;) {
+        var c = n.delegate;
+        if (c) {
+          var u = maybeInvokeDelegate(c, n);
+          if (u) {
+            if (u === y) continue;
+            return u;
+          }
+        }
+        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+          if (o === h) throw o = s, n.arg;
+          n.dispatchException(n.arg);
+        } else "return" === n.method && n.abrupt("return", n.arg);
+        o = f;
+        var p = tryCatch(e, r, n);
+        if ("normal" === p.type) {
+          if (o = n.done ? s : l, p.arg === y) continue;
+          return {
+            value: p.arg,
+            done: n.done
+          };
+        }
+        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+      }
+    };
   }
-
-  function pushTryEntry(locs) {
-    var entry = {
-      tryLoc: locs[0]
+  function maybeInvokeDelegate(e, r) {
+    var n = r.method,
+      o = e.iterator[n];
+    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+    var i = tryCatch(o, e.iterator, r.arg);
+    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+    var a = i.arg;
+    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+  }
+  function pushTryEntry(t) {
+    var e = {
+      tryLoc: t[0]
     };
-    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
   }
-
-  function resetTryEntry(entry) {
-    var record = entry.completion || {};
-    record.type = "normal", delete record.arg, entry.completion = record;
+  function resetTryEntry(t) {
+    var e = t.completion || {};
+    e.type = "normal", delete e.arg, t.completion = e;
   }
-
-  function Context(tryLocsList) {
+  function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(!0);
   }
-
-  function values(iterable) {
-    if (iterable) {
-      var iteratorMethod = iterable[iteratorSymbol];
-      if (iteratorMethod) return iteratorMethod.call(iterable);
-      if ("function" == typeof iterable.next) return iterable;
-
-      if (!isNaN(iterable.length)) {
-        var i = -1,
-            next = function next() {
-          for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
-
-          return next.value = undefined, next.done = !0, next;
-        };
-
-        return next.next = next;
+  function values(e) {
+    if (e || "" === e) {
+      var r = e[a];
+      if (r) return r.call(e);
+      if ("function" == typeof e.next) return e;
+      if (!isNaN(e.length)) {
+        var o = -1,
+          i = function next() {
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+            return next.value = t, next.done = !0, next;
+          };
+        return i.next = i;
       }
     }
-
-    return {
-      next: doneResult
-    };
-  }
-
-  function doneResult() {
-    return {
-      value: undefined,
-      done: !0
-    };
+    throw new TypeError(typeof e + " is not iterable");
   }
-
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
-    var ctor = "function" == typeof genFun && genFun.constructor;
-    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
-  }, exports.mark = function (genFun) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
-  }, exports.awrap = function (arg) {
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), o(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+    var e = "function" == typeof t && t.constructor;
+    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+  }, e.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+  }, e.awrap = function (t) {
     return {
-      __await: arg
+      __await: t
     };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
     return this;
-  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-    void 0 === PromiseImpl && (PromiseImpl = Promise);
-    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
-    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
-      return result.done ? result.value : iter.next();
+  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+    void 0 === i && (i = Promise);
+    var a = new AsyncIterator(wrap(t, r, n, o), i);
+    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+      return t.done ? t.value : a.next();
     });
-  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
     return this;
-  }), define(Gp, "toString", function () {
+  }), define(g, "toString", function () {
     return "[object Generator]";
-  }), exports.keys = function (object) {
-    var keys = [];
-
-    for (var key in object) keys.push(key);
-
-    return keys.reverse(), function next() {
-      for (; keys.length;) {
-        var key = keys.pop();
-        if (key in object) return next.value = key, next.done = !1, next;
+  }), e.keys = function (t) {
+    var e = Object(t),
+      r = [];
+    for (var n in e) r.push(n);
+    return r.reverse(), function next() {
+      for (; r.length;) {
+        var t = r.pop();
+        if (t in e) return next.value = t, next.done = !1, next;
       }
-
       return next.done = !0, next;
     };
-  }, exports.values = values, Context.prototype = {
+  }, e.values = values, Context.prototype = {
     constructor: Context,
-    reset: function (skipTempReset) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    reset: function (e) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
       this.done = !0;
-      var rootRecord = this.tryEntries[0].completion;
-      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      var t = this.tryEntries[0].completion;
+      if ("throw" === t.type) throw t.arg;
       return this.rval;
     },
-    dispatchException: function (exception) {
-      if (this.done) throw exception;
-      var context = this;
-
-      function handle(loc, caught) {
-        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+    dispatchException: function (e) {
+      if (this.done) throw e;
+      var r = this;
+      function handle(n, o) {
+        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
       }
-
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i],
-            record = entry.completion;
-        if ("root" === entry.tryLoc) return handle("end");
-
-        if (entry.tryLoc <= this.prev) {
-          var hasCatch = hasOwn.call(entry, "catchLoc"),
-              hasFinally = hasOwn.call(entry, "finallyLoc");
-
-          if (hasCatch && hasFinally) {
-            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
-            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
-          } else if (hasCatch) {
-            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+        var i = this.tryEntries[o],
+          a = i.completion;
+        if ("root" === i.tryLoc) return handle("end");
+        if (i.tryLoc <= this.prev) {
+          var c = n.call(i, "catchLoc"),
+            u = n.call(i, "finallyLoc");
+          if (c && u) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          } else if (c) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
           } else {
-            if (!hasFinally) throw new Error("try statement without catch or finally");
-            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+            if (!u) throw new Error("try statement without catch or finally");
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           }
         }
       }
     },
-    abrupt: function (type, arg) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-
-        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-          var finallyEntry = entry;
+    abrupt: function (t, e) {
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var o = this.tryEntries[r];
+        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+          var i = o;
           break;
         }
       }
-
-      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
-      var record = finallyEntry ? finallyEntry.completion : {};
-      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+      var a = i ? i.completion : {};
+      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
     },
-    complete: function (record, afterLoc) {
-      if ("throw" === record.type) throw record.arg;
-      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    complete: function (t, e) {
+      if ("throw" === t.type) throw t.arg;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
     },
-    finish: function (finallyLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+    finish: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
       }
     },
-    catch: function (tryLoc) {
-      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-        var entry = this.tryEntries[i];
-
-        if (entry.tryLoc === tryLoc) {
-          var record = entry.completion;
-
-          if ("throw" === record.type) {
-            var thrown = record.arg;
-            resetTryEntry(entry);
+    catch: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.tryLoc === t) {
+          var n = r.completion;
+          if ("throw" === n.type) {
+            var o = n.arg;
+            resetTryEntry(r);
           }
-
-          return thrown;
+          return o;
         }
       }
-
       throw new Error("illegal catch attempt");
     },
-    delegateYield: function (iterable, resultName, nextLoc) {
+    delegateYield: function (e, r, n) {
       return this.delegate = {
-        iterator: values(iterable),
-        resultName: resultName,
-        nextLoc: nextLoc
-      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+        iterator: values(e),
+        resultName: r,
+        nextLoc: n
+      }, "next" === this.method && (this.arg = t), y;
     }
-  }, exports;
+  }, e;
 }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -421,35 +395,30 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     reject(error);
     return;
   }
-
   if (info.done) {
     resolve(value);
   } else {
     Promise.resolve(value).then(_next, _throw);
   }
 }
-
 function _asyncToGenerator(fn) {
   return function () {
     var self = this,
-        args = arguments;
+      args = arguments;
     return new Promise(function (resolve, reject) {
       var gen = fn.apply(self, args);
-
       function _next(value) {
         asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
       }
-
       function _throw(err) {
         asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
       }
-
       _next(undefined);
     });
   };
 }
-
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -460,35 +429,26 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return 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;
@@ -496,60 +456,23 @@ function _objectWithoutProperties(source, excluded) {
       target[key] = source[key];
     }
   }
-
   return target;
 }
-
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -558,35 +481,44 @@ function _unsupportedIterableToArray(o, minLen) {
   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 _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 _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 _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 _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);
+}
 
 /* eslint-disable valid-jsdoc */
 // @ts-check
+
 var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
 /**
  * Replace all text with emoji with an image html tag
  * @param {string} text
  * @return {string}
  */
-
 function replaceAllTextEmojis(text) {
   var allEmojis = getAllEmojisFromText(text);
-
   if (allEmojis) {
     allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
 
@@ -594,9 +526,9 @@ function replaceAllTextEmojis(text) {
       text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
     });
   }
-
   return text;
 }
+
 /**
  * Replace all occurrencies in a string
  * @param {string} str
@@ -604,77 +536,67 @@ function replaceAllTextEmojis(text) {
  * @param {string} replace
  * @return {string}
  */
-
 function replaceAll(str, find, replace) {
   return str.replace(new RegExp(find, "g"), replace);
 }
+
 /**
  * Get all emojis from the text
  * @param {string} text
  * @return {string[]}
  */
-
-
 function getAllEmojisFromText(text) {
   return text.match(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
-} // eslint-disable-next-line valid-jsdoc
+}
 
+// eslint-disable-next-line valid-jsdoc
 /**
  *
  * @param { import("../types/types").EmojiMartItem } emoji
  * @return {string}
  */
-
-
 function getImageEmoji(emoji) {
   var _emojiPickerEl$shadow;
-
   /** @type {HTMLElement | null} */
   var emojiPickerEl = document.querySelector('em-emoji-picker');
-
   if (!emojiPickerEl) {
     return getInputEmojiNativeHTML(emoji["native"]);
   }
-  /** @type {HTMLSpanElement | null=} */
-
-
-  var emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 ? void 0 : (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
 
+  /** @type {HTMLSpanElement | null=} */
+  var emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 || (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
   if (!emojiSpanEl) {
     return getInputEmojiNativeHTML(emoji["native"]);
   }
-
   var style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
   return getInputEmojiHTML(style, emoji["native"]);
-} // eslint-disable-next-line valid-jsdoc
+}
 
+// eslint-disable-next-line valid-jsdoc
 /**
  *
  * @param {string} style
  * @param {string} emoji
  * @returns
  */
-
 function getInputEmojiHTML(style, emoji) {
   return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
 }
+
 /**
  * 
  * @param {string} emoji 
  * @returns 
  */
-
-
 function getInputEmojiNativeHTML(emoji) {
   return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
 }
+
 /**
  *
  * @param {string} html
  * @return {string}
  */
-
-
 function replaceAllTextEmojiToString(html) {
   var container = document.createElement("div");
   container.innerHTML = html;
@@ -686,37 +608,35 @@ function replaceAllTextEmojiToString(html) {
 }
 
 // @ts-check
+
 /**
  *
  * @param {string} html
  */
-
 function handlePasteHtmlAtCaret(html) {
   var sel;
   var range;
-
   if (window.getSelection) {
     // IE9 and non-IE
     sel = window.getSelection();
     if (sel === null) return;
-
     if (sel.getRangeAt && sel.rangeCount) {
       range = sel.getRangeAt(0);
-      range.deleteContents(); // Range.createContextualFragment() would be useful here but is
-      // non-standard and not supported in all browsers (IE9, for one)
+      range.deleteContents();
 
+      // Range.createContextualFragment() would be useful here but is
+      // non-standard and not supported in all browsers (IE9, for one)
       var el = document.createElement("div");
       el.innerHTML = html;
       var frag = document.createDocumentFragment();
       var node;
       var lastNode;
-
       while (node = el.firstChild) {
         lastNode = frag.appendChild(node);
       }
+      range.insertNode(frag);
 
-      range.insertNode(frag); // Preserve the selection
-
+      // Preserve the selection
       if (lastNode) {
         range = range.cloneRange();
         range.setStartAfter(lastNode);
@@ -727,34 +647,32 @@ function handlePasteHtmlAtCaret(html) {
     }
   }
 }
+
 /**
  *
  * @param {{text: string, html: string}} props
  * @return {number}
  */
-
 function totalCharacters(_ref2) {
   var text = _ref2.text,
-      html = _ref2.html;
+    html = _ref2.html;
   var textCount = text.length;
   var emojisCount = (html.match(/<img/g) || []).length;
   return textCount + emojisCount;
-} // eslint-disable-next-line valid-jsdoc
+}
+
 /**
  * Set caret to the end of text value
  * @param {React.MutableRefObject<HTMLDivElement| null>} input
  */
-
 function moveCaretToEnd(input) {
   var range;
   var selection;
-
   if (document.createRange && input.current) {
     range = document.createRange();
     range.selectNodeContents(input.current);
     range.collapse(false);
     selection = window.getSelection();
-
     if (selection) {
       selection.removeAllRanges();
       selection.addRange(range);
@@ -766,39 +684,34 @@ function moveCaretToEnd(input) {
  * @param {HTMLDivElement} inputDiv 
  * @return {string}
  */
-
 function removeHtmlExceptBr(inputDiv) {
   var temp = inputDiv.innerHTML.replace(/<br\s*\/?>/gi, '[BR]'); // temporarily replace <br> with placeholder
-
   var stripped = temp.replace(/<[^>]+>/g, ''); // strip all html tags
-
   var _final = stripped.replace(/\[BR\]/gi, '</br>'); // replace placeholders with <br>
-
-
   return _final;
 }
 
 // @ts-check
+
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /**
  * @param {boolean} shouldReturn
  */
-
 function useSanitize(shouldReturn) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
   var sanitizeFnsRef = React.useRef([]);
   var sanitizedTextRef = React.useRef("");
-  /** @type {(fn: SanitizeFn) => void} */
 
+  /** @type {(fn: SanitizeFn) => void} */
   var addSanitizeFn = React.useCallback(function (fn) {
     sanitizeFnsRef.current.push(fn);
   }, []);
-  /** @type {(html: string) => string} */
 
+  /** @type {(html: string) => string} */
   var sanitize = React.useCallback(function (html) {
     var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
       return fn(acc);
@@ -813,30 +726,30 @@ function useSanitize(shouldReturn) {
     sanitizedTextRef: sanitizedTextRef
   };
 }
+
 /**
  *
  * @param {string} html
  * @param {boolean} shouldReturn
  * @return {string}
  */
-
 function replaceAllHtmlToString(html, shouldReturn) {
   var container = document.createElement("div");
   container.innerHTML = html;
   var text;
-
   if (shouldReturn) {
     text = removeHtmlExceptBr(container);
   } else {
     text = container.innerText || "";
-  } // remove all ↵ for safari
-
+  }
 
+  // remove all ↵ for safari
   text = text.replace(/\n/gi, "");
   return text;
 }
 
 // @ts-check
+
 /**
  * @typedef {Object} Props
  * @property {React.Ref<any>} ref
@@ -849,27 +762,22 @@ function replaceAllHtmlToString(html, shouldReturn) {
  *
  * @param {Props} props
  */
-
 function useExpose(_ref) {
   var ref = _ref.ref,
-      textInputRef = _ref.textInputRef,
-      setValue = _ref.setValue,
-      emitChange = _ref.emitChange;
-
+    textInputRef = _ref.textInputRef,
+    setValue = _ref.setValue,
+    emitChange = _ref.emitChange;
   var _useSanitize = useSanitize(),
-      sanitize = _useSanitize.sanitize,
-      sanitizedTextRef = _useSanitize.sanitizedTextRef;
-
+    sanitize = _useSanitize.sanitize,
+    sanitizedTextRef = _useSanitize.sanitizedTextRef;
   React.useImperativeHandle(ref, function () {
     return {
       get value() {
         return sanitizedTextRef.current;
       },
-
       set value(value) {
         setValue(value);
       },
-
       focus: function focus() {
         if (textInputRef.current === null) return;
         textInputRef.current.focus();
@@ -878,7 +786,6 @@ function useExpose(_ref) {
         if (textInputRef.current !== null) {
           sanitize(textInputRef.current.html);
         }
-
         emitChange();
       }
     };
@@ -887,13 +794,13 @@ function useExpose(_ref) {
 
 // @ts-check
 
+// eslint-disable-next-line valid-jsdoc
 /**
  * useEmit
  * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @param {(size: {width: number, height: number}) => void} onResize
  * @param {(text: string) => void} onChange
  */
-
 function useEmit(textInputRef, onResize, onChange) {
   /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
   var currentSizeRef = React.useRef(null);
@@ -902,11 +809,9 @@ function useEmit(textInputRef, onResize, onChange) {
     if (textInputRef.current !== null) {
       var currentSize = currentSizeRef.current;
       var nextSize = textInputRef.current.size;
-
       if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
         onResize(nextSize);
       }
-
       currentSizeRef.current = nextSize;
     }
   }, [onResize, textInputRef]);
@@ -914,7 +819,6 @@ function useEmit(textInputRef, onResize, onChange) {
     if (typeof onChangeFn.current === "function") {
       onChangeFn.current(sanitizedText);
     }
-
     if (typeof onResize === "function") {
       checkAndEmitResize();
     }
@@ -928,6 +832,7 @@ function useEmit(textInputRef, onResize, onChange) {
 }
 
 var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
+
 /**
  * @typedef {Object} Props
  * @property {(event: React.KeyboardEvent) => void} onKeyDown
@@ -957,47 +862,39 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  *  focus: () => void;
  * }} Ref
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-
 var TextInput = function TextInput(_ref, ref) {
   var placeholder = _ref.placeholder,
-      style = _ref.style,
-      tabIndex = _ref.tabIndex,
-      className = _ref.className,
-      onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    style = _ref.style,
+    tabIndex = _ref.tabIndex,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
   React.useImperativeHandle(ref, function () {
     return {
       appendContent: function appendContent(html) {
         if (textInputRef.current) {
           textInputRef.current.focus();
         }
-
         handlePasteHtmlAtCaret(html);
-
         if (textInputRef.current) {
           textInputRef.current.focus();
         }
-
         if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
           placeholderRef.current.style.visibility = "visible";
         } else if (placeholderRef.current) {
           placeholderRef.current.style.visibility = "hidden";
         }
-
         if (textInputRef.current && typeof onChange === 'function') {
           onChange(textInputRef.current.innerHTML);
         }
       },
-
       set html(value) {
         if (textInputRef.current) {
           textInputRef.current.innerHTML = value;
         }
-
         if (placeholderRef.current) {
           if (value.trim() === "") {
             placeholderRef.current.style.visibility = "visible";
@@ -1005,22 +902,18 @@ var TextInput = function TextInput(_ref, ref) {
             placeholderRef.current.style.visibility = "hidden";
           }
         }
-
         if (typeof onChange === 'function' && textInputRef.current) {
           onChange(textInputRef.current.innerHTML);
         }
       },
-
       get html() {
         if (!textInputRef.current) return '';
         return textInputRef.current.innerHTML;
       },
-
       get text() {
         if (!textInputRef.current) return '';
         return textInputRef.current.innerText;
       },
-
       get size() {
         if (!textInputRef.current) {
           return {
@@ -1028,41 +921,36 @@ var TextInput = function TextInput(_ref, ref) {
             height: 0
           };
         }
-
         return {
           width: textInputRef.current.offsetWidth,
           height: textInputRef.current.offsetHeight
         };
       },
-
       focus: function focus() {
         if (!textInputRef.current) return;
         textInputRef.current.focus();
       }
     };
   });
-  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = React.useRef(null);
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
-
   var textInputRef = React.useRef(null);
+
   /**
    *
    * @param {React.KeyboardEvent} event
    */
-
   function handleKeyDown(event) {
     if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
       event.preventDefault();
-
       if (textInputRef.current) {
         textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
         moveCaretToEnd(textInputRef);
         return;
       }
     }
-
     if (event.key === "Enter") {
       props.onEnter(event);
     } else if (event.key === "ArrowUp") {
@@ -1074,40 +962,33 @@ var TextInput = function TextInput(_ref, ref) {
         placeholderRef.current.style.visibility = "hidden";
       }
     }
-
     props.onKeyDown(event);
   }
-  /** */
-
 
+  /** */
   function handleClick() {
     props.onFocus();
   }
+
   /**
    *
    * @param {React.KeyboardEvent} event
    */
-
-
   function handleKeyUp(event) {
     props.onKeyUp(event);
     var input = textInputRef.current;
-
     if (placeholderRef.current) {
       var _input$innerText;
-
-      if ((input === null || input === void 0 ? void 0 : (_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
+      if ((input === null || input === void 0 || (_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
         placeholderRef.current.style.visibility = "visible";
       } else {
         placeholderRef.current.style.visibility = "hidden";
       }
     }
-
     if (typeof onChange === 'function' && textInputRef.current) {
       onChange(textInputRef.current.innerHTML);
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--container",
     style: style
@@ -1130,7 +1011,6 @@ var TextInput = function TextInput(_ref, ref) {
     "data-testid": "react-input-emoji--input"
   })));
 };
-
 var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
 
 /**
@@ -1138,6 +1018,7 @@ var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
  * @property {boolean} showPicker
  * @property {(event: React.MouseEvent) => void} toggleShowPicker
  * @property {HTMLDivElement=} buttonElement
+ * @property {React.MutableRefObject=} buttonRef
  */
 
 /**
@@ -1145,28 +1026,28 @@ var TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
  * @param {Props} props
  * @return {JSX.Element}
  */
-
 function EmojiPickerButton(_ref) {
   var showPicker = _ref.showPicker,
-      toggleShowPicker = _ref.toggleShowPicker,
-      buttonElement = _ref.buttonElement;
-  var buttonRef = React.useRef(null);
-
+    toggleShowPicker = _ref.toggleShowPicker,
+    buttonElement = _ref.buttonElement,
+    buttonRef = _ref.buttonRef;
+  var localButtonRef = React.useRef(null);
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showCustomButtonContent = _useState2[0],
-      setShowCustomButtonContent = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showCustomButtonContent = _useState2[0],
+    setShowCustomButtonContent = _useState2[1];
   React.useEffect(function () {
-    var _buttonElement$childN, _buttonElement$childN2;
-
-    if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 ? void 0 : (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
-      buttonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
+    var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
+    if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
+      localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
+      setShowCustomButtonContent(true);
+    } else if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 || (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
+      localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
       setShowCustomButtonContent(true);
     }
   }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
   return /*#__PURE__*/React__default["default"].createElement("button", {
-    ref: buttonRef,
+    ref: localButtonRef,
     type: "button",
     className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
     onClick: toggleShowPicker
@@ -1186,7 +1067,6 @@ function EmojiPickerButton(_ref) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-
 function $c770c458706daa72$export$2e2bcd8739ae039(obj, key, value) {
   if (key in obj) Object.defineProperty(obj, key, {
     value: value,
@@ -1196,40 +1076,32 @@ function $c770c458706daa72$export$2e2bcd8739ae039(obj, key, value) {
   });else obj[key] = value;
   return obj;
 }
-
 var $fb96b826c0c5f37a$var$n,
-    $fb96b826c0c5f37a$export$41c562ebe57d11e2,
-    $fb96b826c0c5f37a$var$u,
-    $fb96b826c0c5f37a$var$t,
-    $fb96b826c0c5f37a$var$r,
-    $fb96b826c0c5f37a$var$o,
-    $fb96b826c0c5f37a$var$e = {},
-    $fb96b826c0c5f37a$var$c = [],
-    $fb96b826c0c5f37a$var$s = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
-
+  $fb96b826c0c5f37a$export$41c562ebe57d11e2,
+  $fb96b826c0c5f37a$var$u,
+  $fb96b826c0c5f37a$var$t,
+  $fb96b826c0c5f37a$var$r,
+  $fb96b826c0c5f37a$var$o,
+  $fb96b826c0c5f37a$var$e = {},
+  $fb96b826c0c5f37a$var$c = [],
+  $fb96b826c0c5f37a$var$s = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 function $fb96b826c0c5f37a$var$a(n1, l1) {
   for (var u1 in l1) n1[u1] = l1[u1];
-
   return n1;
 }
-
 function $fb96b826c0c5f37a$var$h(n2) {
   var l2 = n2.parentNode;
   l2 && l2.removeChild(n2);
 }
-
 function $fb96b826c0c5f37a$export$c8a8987d4410bf2d(l3, u2, i1) {
   var t1,
-      r1,
-      o1,
-      f1 = {};
-
+    r1,
+    o1,
+    f1 = {};
   for (o1 in u2) "key" == o1 ? t1 = u2[o1] : "ref" == o1 ? r1 = u2[o1] : f1[o1] = u2[o1];
-
   if (arguments.length > 2 && (f1.children = arguments.length > 3 ? $fb96b826c0c5f37a$var$n.call(arguments, 2) : i1), "function" == typeof l3 && null != l3.defaultProps) for (o1 in l3.defaultProps) void 0 === f1[o1] && (f1[o1] = l3.defaultProps[o1]);
   return $fb96b826c0c5f37a$var$y(l3, f1, t1, r1, null);
 }
-
 function $fb96b826c0c5f37a$var$y(n3, i2, t2, r2, o2) {
   var f2 = {
     type: n3,
@@ -1248,46 +1120,35 @@ function $fb96b826c0c5f37a$var$y(n3, i2, t2, r2, o2) {
   };
   return null == o2 && null != $fb96b826c0c5f37a$export$41c562ebe57d11e2.vnode && $fb96b826c0c5f37a$export$41c562ebe57d11e2.vnode(f2), f2;
 }
-
 function $fb96b826c0c5f37a$export$7d1e3a5e95ceca43() {
   return {
     current: null
   };
 }
-
 function $fb96b826c0c5f37a$export$ffb0004e005737fa(n4) {
   return n4.children;
 }
-
 function $fb96b826c0c5f37a$export$16fa2f45be04daa8(n5, l4) {
   this.props = n5, this.context = l4;
 }
-
 function $fb96b826c0c5f37a$var$k(n6, l5) {
   if (null == l5) return n6.__ ? $fb96b826c0c5f37a$var$k(n6.__, n6.__.__k.indexOf(n6) + 1) : null;
-
   for (var u3; l5 < n6.__k.length; l5++) if (null != (u3 = n6.__k[l5]) && null != u3.__e) return u3.__e;
-
   return "function" == typeof n6.type ? $fb96b826c0c5f37a$var$k(n6) : null;
 }
-
 function $fb96b826c0c5f37a$var$b(n7) {
   var l6, u4;
-
   if (null != (n7 = n7.__) && null != n7.__c) {
     for (n7.__e = n7.__c.base = null, l6 = 0; l6 < n7.__k.length; l6++) if (null != (u4 = n7.__k[l6]) && null != u4.__e) {
       n7.__e = n7.__c.base = u4.__e;
       break;
     }
-
     return $fb96b826c0c5f37a$var$b(n7);
   }
 }
-
 function $fb96b826c0c5f37a$var$m(n8) {
   (!n8.__d && (n8.__d = !0) && $fb96b826c0c5f37a$var$t.push(n8) && !$fb96b826c0c5f37a$var$g.__r++ || $fb96b826c0c5f37a$var$o !== $fb96b826c0c5f37a$export$41c562ebe57d11e2.debounceRendering) && (($fb96b826c0c5f37a$var$o = $fb96b826c0c5f37a$export$41c562ebe57d11e2.debounceRendering) || $fb96b826c0c5f37a$var$r)($fb96b826c0c5f37a$var$g);
 }
-
 function $fb96b826c0c5f37a$var$g() {
   for (var n9; $fb96b826c0c5f37a$var$g.__r = $fb96b826c0c5f37a$var$t.length;) n9 = $fb96b826c0c5f37a$var$t.sort(function (n10, l7) {
     return n10.__v.__b - l7.__v.__b;
@@ -1296,18 +1157,16 @@ function $fb96b826c0c5f37a$var$g() {
     n11.__d && (r3 = (t3 = (l8 = n11).__v).__e, (o3 = l8.__P) && (u5 = [], (i3 = $fb96b826c0c5f37a$var$a({}, t3)).__v = t3.__v + 1, $fb96b826c0c5f37a$var$j(o3, t3, i3, l8.__n, void 0 !== o3.ownerSVGElement, null != t3.__h ? [r3] : null, u5, null == r3 ? $fb96b826c0c5f37a$var$k(t3) : r3, t3.__h), $fb96b826c0c5f37a$var$z(u5, t3), t3.__e != r3 && $fb96b826c0c5f37a$var$b(t3)));
   });
 }
-
 function $fb96b826c0c5f37a$var$w(n12, l9, u6, i4, t4, r4, o4, f3, s1, a1) {
   var h1,
-      v1,
-      p1,
-      _1,
-      b1,
-      m1,
-      g1,
-      w1 = i4 && i4.__k || $fb96b826c0c5f37a$var$c,
-      A1 = w1.length;
-
+    v1,
+    p1,
+    _1,
+    b1,
+    m1,
+    g1,
+    w1 = i4 && i4.__k || $fb96b826c0c5f37a$var$c,
+    A1 = w1.length;
   for (u6.__k = [], h1 = 0; h1 < l9.length; h1++) if (null != (_1 = u6.__k[h1] = null == (_1 = l9[h1]) || "boolean" == typeof _1 ? null : "string" == typeof _1 || "number" == typeof _1 || "bigint" == typeof _1 ? $fb96b826c0c5f37a$var$y(null, _1, null, null, _1) : Array.isArray(_1) ? $fb96b826c0c5f37a$var$y($fb96b826c0c5f37a$export$ffb0004e005737fa, {
     children: _1
   }, null, null, null) : _1.__b > 0 ? $fb96b826c0c5f37a$var$y(_1.type, _1.props, _1.key, null, _1.__v) : _1)) {
@@ -1316,54 +1175,40 @@ function $fb96b826c0c5f37a$var$w(n12, l9, u6, i4, t4, r4, o4, f3, s1, a1) {
         w1[v1] = void 0;
         break;
       }
-
       p1 = null;
     }
     $fb96b826c0c5f37a$var$j(n12, _1, p1 = p1 || $fb96b826c0c5f37a$var$e, t4, r4, o4, f3, s1, a1), b1 = _1.__e, (v1 = _1.ref) && p1.ref != v1 && (g1 || (g1 = []), p1.ref && g1.push(p1.ref, null, _1), g1.push(v1, _1.__c || b1, _1)), null != b1 ? (null == m1 && (m1 = b1), "function" == typeof _1.type && _1.__k === p1.__k ? _1.__d = s1 = $fb96b826c0c5f37a$var$x(_1, s1, n12) : s1 = $fb96b826c0c5f37a$var$P(n12, _1, p1, w1, b1, s1), "function" == typeof u6.type && (u6.__d = s1)) : s1 && p1.__e == s1 && s1.parentNode != n12 && (s1 = $fb96b826c0c5f37a$var$k(p1));
   }
-
   for (u6.__e = m1, h1 = A1; h1--;) null != w1[h1] && ("function" == typeof u6.type && null != w1[h1].__e && w1[h1].__e == u6.__d && (u6.__d = $fb96b826c0c5f37a$var$k(i4, h1 + 1)), $fb96b826c0c5f37a$var$N(w1[h1], w1[h1]));
-
   if (g1) for (h1 = 0; h1 < g1.length; h1++) $fb96b826c0c5f37a$var$M(g1[h1], g1[++h1], g1[++h1]);
 }
-
 function $fb96b826c0c5f37a$var$x(n13, l10, u7) {
   for (var i5, t5 = n13.__k, r5 = 0; t5 && r5 < t5.length; r5++) (i5 = t5[r5]) && (i5.__ = n13, l10 = "function" == typeof i5.type ? $fb96b826c0c5f37a$var$x(i5, l10, u7) : $fb96b826c0c5f37a$var$P(u7, i5, i5, t5, i5.__e, l10));
-
   return l10;
 }
-
 function $fb96b826c0c5f37a$export$47e4c5b300681277(n14, l11) {
   return l11 = l11 || [], null == n14 || "boolean" == typeof n14 || (Array.isArray(n14) ? n14.some(function (n15) {
     $fb96b826c0c5f37a$export$47e4c5b300681277(n15, l11);
   }) : l11.push(n14)), l11;
 }
-
 function $fb96b826c0c5f37a$var$P(n16, l12, u8, i6, t6, r6) {
   var o5, f4, e1;
   if (void 0 !== l12.__d) o5 = l12.__d, l12.__d = void 0;else if (null == u8 || t6 != r6 || null == t6.parentNode) n: if (null == r6 || r6.parentNode !== n16) n16.appendChild(t6), o5 = null;else {
     for (f4 = r6, e1 = 0; (f4 = f4.nextSibling) && e1 < i6.length; e1 += 2) if (f4 == t6) break n;
-
     n16.insertBefore(t6, r6), o5 = r6;
   }
   return void 0 !== o5 ? o5 : t6.nextSibling;
 }
-
 function $fb96b826c0c5f37a$var$C(n17, l13, u9, i7, t7) {
   var r7;
-
   for (r7 in u9) "children" === r7 || "key" === r7 || r7 in l13 || $fb96b826c0c5f37a$var$H(n17, r7, null, u9[r7], i7);
-
   for (r7 in l13) t7 && "function" != typeof l13[r7] || "children" === r7 || "key" === r7 || "value" === r7 || "checked" === r7 || u9[r7] === l13[r7] || $fb96b826c0c5f37a$var$H(n17, r7, l13[r7], u9[r7], i7);
 }
-
 function $fb96b826c0c5f37a$var$$(n18, l14, u10) {
   "-" === l14[0] ? n18.setProperty(l14, u10) : n18[l14] = null == u10 ? "" : "number" != typeof u10 || $fb96b826c0c5f37a$var$s.test(l14) ? u10 : u10 + "px";
 }
-
 function $fb96b826c0c5f37a$var$H(n19, l15, u11, i8, t8) {
   var r8;
-
   n: if ("style" === l15) {
     if ("string" == typeof u11) n19.style.cssText = u11;else {
       if ("string" == typeof i8 && (n19.style.cssText = i8 = ""), i8) for (l15 in i8) u11 && l15 in u11 || $fb96b826c0c5f37a$var$$(n19.style, l15, "");
@@ -1377,31 +1222,27 @@ function $fb96b826c0c5f37a$var$H(n19, l15, u11, i8, t8) {
     "function" == typeof u11 || (null != u11 && (!1 !== u11 || "a" === l15[0] && "r" === l15[1]) ? n19.setAttribute(l15, u11) : n19.removeAttribute(l15));
   }
 }
-
 function $fb96b826c0c5f37a$var$I(n20) {
   this.l[n20.type + !1]($fb96b826c0c5f37a$export$41c562ebe57d11e2.event ? $fb96b826c0c5f37a$export$41c562ebe57d11e2.event(n20) : n20);
 }
-
 function $fb96b826c0c5f37a$var$T(n21) {
   this.l[n21.type + !0]($fb96b826c0c5f37a$export$41c562ebe57d11e2.event ? $fb96b826c0c5f37a$export$41c562ebe57d11e2.event(n21) : n21);
 }
-
 function $fb96b826c0c5f37a$var$j(n22, u12, i9, t9, r9, o6, f5, e2, c1) {
   var s2,
-      h2,
-      v2,
-      y1,
-      p2,
-      k1,
-      b2,
-      m2,
-      g2,
-      x1,
-      A2,
-      P1 = u12.type;
+    h2,
+    v2,
+    y1,
+    p2,
+    k1,
+    b2,
+    m2,
+    g2,
+    x1,
+    A2,
+    P1 = u12.type;
   if (void 0 !== u12.constructor) return null;
   null != i9.__h && (c1 = i9.__h, e2 = u12.__e = i9.__e, u12.__h = null, o6 = [e2]), (s2 = $fb96b826c0c5f37a$export$41c562ebe57d11e2.__b) && s2(u12);
-
   try {
     n: if ("function" == typeof P1) {
       if (m2 = u12.props, g2 = (s2 = P1.contextType) && t9[s2.__c], x1 = s2 ? g2 ? g2.props.value : s2.__ : t9, i9.__c ? b2 = (h2 = u12.__c = i9.__c).__ = h2.__E : ("prototype" in P1 && P1.prototype.render ? u12.__c = h2 = new P1(m2, x1) : (u12.__c = h2 = new $fb96b826c0c5f37a$export$16fa2f45be04daa8(m2, x1), h2.constructor = P1, h2.render = $fb96b826c0c5f37a$var$O), g2 && g2.sub(h2), h2.props = m2, h2.state || (h2.state = {}), h2.context = x1, h2.__n = t9, v2 = h2.__d = !0, h2.__h = []), null == h2.__s && (h2.__s = h2.state), null != P1.getDerivedStateFromProps && (h2.__s == h2.state && (h2.__s = $fb96b826c0c5f37a$var$a({}, h2.__s)), $fb96b826c0c5f37a$var$a(h2.__s, P1.getDerivedStateFromProps(m2, h2.__s))), y1 = h2.props, p2 = h2.state, v2) null == P1.getDerivedStateFromProps && null != h2.componentWillMount && h2.componentWillMount(), null != h2.componentDidMount && h2.__h.push(h2.componentDidMount);else {
@@ -1411,20 +1252,17 @@ function $fb96b826c0c5f37a$var$j(n22, u12, i9, t9, r9, o6, f5, e2, c1) {
           }), h2.__h.length && f5.push(h2);
           break n;
         }
-
         null != h2.componentWillUpdate && h2.componentWillUpdate(m2, h2.__s, x1), null != h2.componentDidUpdate && h2.__h.push(function () {
           h2.componentDidUpdate(y1, p2, k1);
         });
       }
       h2.context = x1, h2.props = m2, h2.state = h2.__s, (s2 = $fb96b826c0c5f37a$export$41c562ebe57d11e2.__r) && s2(u12), h2.__d = !1, h2.__v = u12, h2.__P = n22, s2 = h2.render(h2.props, h2.state, h2.context), h2.state = h2.__s, null != h2.getChildContext && (t9 = $fb96b826c0c5f37a$var$a($fb96b826c0c5f37a$var$a({}, t9), h2.getChildContext())), v2 || null == h2.getSnapshotBeforeUpdate || (k1 = h2.getSnapshotBeforeUpdate(y1, p2)), A2 = null != s2 && s2.type === $fb96b826c0c5f37a$export$ffb0004e005737fa && null == s2.key ? s2.props.children : s2, $fb96b826c0c5f37a$var$w(n22, Array.isArray(A2) ? A2 : [A2], u12, i9, t9, r9, o6, f5, e2, c1), h2.base = u12.__e, u12.__h = null, h2.__h.length && f5.push(h2), b2 && (h2.__E = h2.__ = null), h2.__e = !1;
     } else null == o6 && u12.__v === i9.__v ? (u12.__k = i9.__k, u12.__e = i9.__e) : u12.__e = $fb96b826c0c5f37a$var$L(i9.__e, u12, i9, t9, r9, o6, f5, c1);
-
     (s2 = $fb96b826c0c5f37a$export$41c562ebe57d11e2.diffed) && s2(u12);
   } catch (n24) {
     u12.__v = null, (c1 || null != o6) && (u12.__e = e2, u12.__h = !!c1, o6[o6.indexOf(e2)] = null), $fb96b826c0c5f37a$export$41c562ebe57d11e2.__e(n24, u12, i9);
   }
 }
-
 function $fb96b826c0c5f37a$var$z(n25, u13) {
   $fb96b826c0c5f37a$export$41c562ebe57d11e2.__c && $fb96b826c0c5f37a$export$41c562ebe57d11e2.__c(u13, n25), n25.some(function (u14) {
     try {
@@ -1436,40 +1274,34 @@ function $fb96b826c0c5f37a$var$z(n25, u13) {
     }
   });
 }
-
 function $fb96b826c0c5f37a$var$L(l16, u15, i10, t10, r10, o7, f6, c2) {
   var s3,
-      a2,
-      v3,
-      y2 = i10.props,
-      p3 = u15.props,
-      d1 = u15.type,
-      _2 = 0;
-
+    a2,
+    v3,
+    y2 = i10.props,
+    p3 = u15.props,
+    d1 = u15.type,
+    _2 = 0;
   if ("svg" === d1 && (r10 = !0), null != o7) {
     for (; _2 < o7.length; _2++) if ((s3 = o7[_2]) && "setAttribute" in s3 == !!d1 && (d1 ? s3.localName === d1 : 3 === s3.nodeType)) {
       l16 = s3, o7[_2] = null;
       break;
     }
   }
-
   if (null == l16) {
     if (null === d1) return document.createTextNode(p3);
     l16 = r10 ? document.createElementNS("http://www.w3.org/2000/svg", d1) : document.createElement(d1, p3.is && p3), o7 = null, c2 = !1;
   }
-
   if (null === d1) y2 === p3 || c2 && l16.data === p3 || (l16.data = p3);else {
     if (o7 = o7 && $fb96b826c0c5f37a$var$n.call(l16.childNodes), a2 = (y2 = i10.props || $fb96b826c0c5f37a$var$e).dangerouslySetInnerHTML, v3 = p3.dangerouslySetInnerHTML, !c2) {
       if (null != o7) for (y2 = {}, _2 = 0; _2 < l16.attributes.length; _2++) y2[l16.attributes[_2].name] = l16.attributes[_2].value;
       (v3 || a2) && (v3 && (a2 && v3.__html == a2.__html || v3.__html === l16.innerHTML) || (l16.innerHTML = v3 && v3.__html || ""));
     }
-
     if ($fb96b826c0c5f37a$var$C(l16, p3, y2, r10, c2), v3) u15.__k = [];else if (_2 = u15.props.children, $fb96b826c0c5f37a$var$w(l16, Array.isArray(_2) ? _2 : [_2], u15, i10, t10, r10 && "foreignObject" !== d1, o7, f6, o7 ? o7[0] : i10.__k && $fb96b826c0c5f37a$var$k(i10, 0), c2), null != o7) for (_2 = o7.length; _2--;) null != o7[_2] && $fb96b826c0c5f37a$var$h(o7[_2]);
     c2 || ("value" in p3 && void 0 !== (_2 = p3.value) && (_2 !== y2.value || _2 !== l16.value || "progress" === d1 && !_2) && $fb96b826c0c5f37a$var$H(l16, "value", _2, y2.value, !1), "checked" in p3 && void 0 !== (_2 = p3.checked) && _2 !== l16.checked && $fb96b826c0c5f37a$var$H(l16, "checked", _2, y2.checked, !1));
   }
   return l16;
 }
-
 function $fb96b826c0c5f37a$var$M(n28, u16, i11) {
   try {
     "function" == typeof n28 ? n28(u16) : n28.current = u16;
@@ -1477,10 +1309,8 @@ function $fb96b826c0c5f37a$var$M(n28, u16, i11) {
     $fb96b826c0c5f37a$export$41c562ebe57d11e2.__e(n29, i11);
   }
 }
-
 function $fb96b826c0c5f37a$var$N(n30, u17, i12) {
   var t11, r11;
-
   if ($fb96b826c0c5f37a$export$41c562ebe57d11e2.unmount && $fb96b826c0c5f37a$export$41c562ebe57d11e2.unmount(n30), (t11 = n30.ref) && (t11.current && t11.current !== n30.__e || $fb96b826c0c5f37a$var$M(t11, null, u17)), null != (t11 = n30.__c)) {
     if (t11.componentWillUnmount) try {
       t11.componentWillUnmount();
@@ -1489,20 +1319,16 @@ function $fb96b826c0c5f37a$var$N(n30, u17, i12) {
     }
     t11.base = t11.__P = null;
   }
-
   if (t11 = n30.__k) for (r11 = 0; r11 < t11.length; r11++) t11[r11] && $fb96b826c0c5f37a$var$N(t11[r11], u17, "function" != typeof n30.type);
   i12 || null == n30.__e || $fb96b826c0c5f37a$var$h(n30.__e), n30.__e = n30.__d = void 0;
 }
-
 function $fb96b826c0c5f37a$var$O(n32, l, u18) {
   return this.constructor(n32, u18);
 }
-
 function $fb96b826c0c5f37a$export$b3890eb0ae9dca99(u19, i13, t12) {
   var r12, o8, f7;
   $fb96b826c0c5f37a$export$41c562ebe57d11e2.__ && $fb96b826c0c5f37a$export$41c562ebe57d11e2.__(u19, i13), o8 = (r12 = "function" == typeof t12) ? null : t12 && t12.__k || i13.__k, f7 = [], $fb96b826c0c5f37a$var$j(i13, u19 = (!r12 && t12 || i13).__k = $fb96b826c0c5f37a$export$c8a8987d4410bf2d($fb96b826c0c5f37a$export$ffb0004e005737fa, null, [u19]), o8 || $fb96b826c0c5f37a$var$e, $fb96b826c0c5f37a$var$e, void 0 !== i13.ownerSVGElement, !r12 && t12 ? [t12] : o8 ? null : i13.firstChild ? $fb96b826c0c5f37a$var$n.call(i13.childNodes) : null, f7, !r12 && t12 ? t12 : o8 ? o8.__e : i13.firstChild, r12), $fb96b826c0c5f37a$var$z(f7, u19);
 }
-
 $fb96b826c0c5f37a$var$n = $fb96b826c0c5f37a$var$c.slice, $fb96b826c0c5f37a$export$41c562ebe57d11e2 = {
   __e: function (n39, l22) {
     for (var u23, i16, t14; l22 = l22.__;) if ((u23 = l22.__c) && !u23.__) try {
@@ -1510,7 +1336,6 @@ $fb96b826c0c5f37a$var$n = $fb96b826c0c5f37a$var$c.slice, $fb96b826c0c5f37a$expor
     } catch (l23) {
       n39 = l23;
     }
-
     throw n39;
   }
 }, $fb96b826c0c5f37a$var$u = 0, $fb96b826c0c5f37a$export$16fa2f45be04daa8.prototype.setState = function (n41, l24) {
@@ -1520,14 +1345,11 @@ $fb96b826c0c5f37a$var$n = $fb96b826c0c5f37a$var$c.slice, $fb96b826c0c5f37a$expor
   this.__v && (this.__e = !0, n42 && this.__h.push(n42), $fb96b826c0c5f37a$var$m(this));
 }, $fb96b826c0c5f37a$export$16fa2f45be04daa8.prototype.render = $fb96b826c0c5f37a$export$ffb0004e005737fa, $fb96b826c0c5f37a$var$t = [], $fb96b826c0c5f37a$var$r = "function" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, $fb96b826c0c5f37a$var$g.__r = 0;
 var $bd9dd35321b03dd4$var$o = 0;
-
 function $bd9dd35321b03dd4$export$34b9dba7ce09269b(_1, e1, n, t, f) {
   var l,
-      s,
-      u = {};
-
+    s,
+    u = {};
   for (s in e1) "ref" == s ? l = e1[s] : u[s] = e1[s];
-
   var a = {
     type: _1,
     props: u,
@@ -1548,20 +1370,17 @@ function $bd9dd35321b03dd4$export$34b9dba7ce09269b(_1, e1, n, t, f) {
   if ("function" == typeof _1 && (l = _1.defaultProps)) for (s in l) void 0 === u[s] && (u[s] = l[s]);
   return ($fb96b826c0c5f37a$export$41c562ebe57d11e2).vnode && ($fb96b826c0c5f37a$export$41c562ebe57d11e2).vnode(a), a;
 }
-
 function $f72b75cf796873c7$var$set(key, value) {
   try {
     window.localStorage[`emoji-mart.${key}`] = JSON.stringify(value);
   } catch (error) {}
 }
-
 function $f72b75cf796873c7$var$get(key) {
   try {
     const value = window.localStorage[`emoji-mart.${key}`];
     if (value) return JSON.parse(value);
   } catch (error) {}
 }
-
 var $f72b75cf796873c7$export$2e2bcd8739ae039 = {
   set: $f72b75cf796873c7$var$set,
   get: $f72b75cf796873c7$var$get
@@ -1601,7 +1420,6 @@ const $c84d045dcc34faf5$var$VERSIONS = [{
   v: 1,
   emoji: "\uD83D\uDE43"
 }];
-
 function $c84d045dcc34faf5$var$latestVersion() {
   for (const {
     v: v,
@@ -1610,76 +1428,68 @@ function $c84d045dcc34faf5$var$latestVersion() {
     if ($c84d045dcc34faf5$var$isSupported(emoji)) return v;
   }
 }
-
 function $c84d045dcc34faf5$var$noCountryFlags() {
   if ($c84d045dcc34faf5$var$isSupported("\uD83C\uDDE8\uD83C\uDDE6")) return false;
   return true;
 }
-
 function $c84d045dcc34faf5$var$isSupported(emoji) {
   if ($c84d045dcc34faf5$var$CACHE.has(emoji)) return $c84d045dcc34faf5$var$CACHE.get(emoji);
   const supported = $c84d045dcc34faf5$var$isEmojiSupported(emoji);
   $c84d045dcc34faf5$var$CACHE.set(emoji, supported);
   return supported;
-} // https://github.com/koala-interactive/is-emoji-supported
-
-
+}
+// https://github.com/koala-interactive/is-emoji-supported
 const $c84d045dcc34faf5$var$isEmojiSupported = (() => {
   let ctx = null;
-
   try {
     if (!navigator.userAgent.includes("jsdom")) ctx = document.createElement("canvas").getContext("2d", {
       willReadFrequently: true
     });
-  } catch {} // Not in browser env
-
-
+  } catch {}
+  // Not in browser env
   if (!ctx) return () => false;
   const CANVAS_HEIGHT = 25;
   const CANVAS_WIDTH = 20;
-  const textSize = Math.floor(CANVAS_HEIGHT / 2); // Initialize convas context
-
+  const textSize = Math.floor(CANVAS_HEIGHT / 2);
+  // Initialize convas context
   ctx.font = textSize + "px Arial, Sans-Serif";
   ctx.textBaseline = "top";
   ctx.canvas.width = CANVAS_WIDTH * 2;
   ctx.canvas.height = CANVAS_HEIGHT;
   return unicode => {
-    ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT); // Draw in red on the left
-
+    ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT);
+    // Draw in red on the left
     ctx.fillStyle = "#FF0000";
-    ctx.fillText(unicode, 0, 22); // Draw in blue on right
-
+    ctx.fillText(unicode, 0, 22);
+    // Draw in blue on right
     ctx.fillStyle = "#0000FF";
     ctx.fillText(unicode, CANVAS_WIDTH, 22);
     const a = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
     const count = a.length;
-    let i = 0; // Search the first visible pixel
-
-    for (; i < count && !a[i + 3]; i += 4); // No visible pixel
-
-
-    if (i >= count) return false; // Emoji has immutable color, so we check the color of the emoji in two different colors
+    let i = 0;
+    // Search the first visible pixel
+    for (; i < count && !a[i + 3]; i += 4);
+    // No visible pixel
+    if (i >= count) return false;
+    // Emoji has immutable color, so we check the color of the emoji in two different colors
     // the result show be the same.
-
     const x = CANVAS_WIDTH + i / 4 % CANVAS_WIDTH;
     const y = Math.floor(i / 4 / CANVAS_WIDTH);
     const b = ctx.getImageData(x, y, 1, 1).data;
-    if (a[i] !== b[0] || a[i + 2] !== b[2]) return false; // Some emojis are a contraction of different ones, so if it's not
+    if (a[i] !== b[0] || a[i + 2] !== b[2]) return false;
+    // Some emojis are a contraction of different ones, so if it's not
     // supported, it will show multiple characters
-
-    if (ctx.measureText(unicode).width >= CANVAS_WIDTH) return false; // Supported
-
+    if (ctx.measureText(unicode).width >= CANVAS_WIDTH) return false;
+    // Supported
     return true;
   };
 })();
-
 var $c84d045dcc34faf5$export$2e2bcd8739ae039 = {
   latestVersion: $c84d045dcc34faf5$var$latestVersion,
   noCountryFlags: $c84d045dcc34faf5$var$noCountryFlags
 };
 const $b22cfd0a55410b4f$var$DEFAULTS = ["+1", "grinning", "kissing_heart", "heart_eyes", "laughing", "stuck_out_tongue_winking_eye", "sweat_smile", "joy", "scream", "disappointed", "unamused", "weary", "sob", "sunglasses", "heart"];
 let $b22cfd0a55410b4f$var$Index = null;
-
 function $b22cfd0a55410b4f$var$add(emoji) {
   $b22cfd0a55410b4f$var$Index || ($b22cfd0a55410b4f$var$Index = ($f72b75cf796873c7$export$2e2bcd8739ae039).get("frequently") || {});
   const emojiId = emoji.id || emoji;
@@ -1689,7 +1499,6 @@ function $b22cfd0a55410b4f$var$add(emoji) {
   ($f72b75cf796873c7$export$2e2bcd8739ae039).set("last", emojiId);
   ($f72b75cf796873c7$export$2e2bcd8739ae039).set("frequently", $b22cfd0a55410b4f$var$Index);
 }
-
 function $b22cfd0a55410b4f$var$get({
   maxFrequentRows: maxFrequentRows,
   perLine: perLine
@@ -1697,51 +1506,39 @@ function $b22cfd0a55410b4f$var$get({
   if (!maxFrequentRows) return [];
   $b22cfd0a55410b4f$var$Index || ($b22cfd0a55410b4f$var$Index = ($f72b75cf796873c7$export$2e2bcd8739ae039).get("frequently"));
   let emojiIds = [];
-
   if (!$b22cfd0a55410b4f$var$Index) {
     $b22cfd0a55410b4f$var$Index = {};
-
     for (let i in $b22cfd0a55410b4f$var$DEFAULTS.slice(0, perLine)) {
       const emojiId = $b22cfd0a55410b4f$var$DEFAULTS[i];
       $b22cfd0a55410b4f$var$Index[emojiId] = perLine - i;
       emojiIds.push(emojiId);
     }
-
     return emojiIds;
   }
-
   const max = maxFrequentRows * perLine;
   const last = ($f72b75cf796873c7$export$2e2bcd8739ae039).get("last");
-
   for (let emojiId in $b22cfd0a55410b4f$var$Index) emojiIds.push(emojiId);
-
   emojiIds.sort((a, b) => {
     const aScore = $b22cfd0a55410b4f$var$Index[b];
     const bScore = $b22cfd0a55410b4f$var$Index[a];
     if (aScore == bScore) return a.localeCompare(b);
     return aScore - bScore;
   });
-
   if (emojiIds.length > max) {
     const removedIds = emojiIds.slice(max);
     emojiIds = emojiIds.slice(0, max);
-
     for (let removedId of removedIds) {
       if (removedId == last) continue;
       delete $b22cfd0a55410b4f$var$Index[removedId];
     }
-
     if (last && emojiIds.indexOf(last) == -1) {
       delete $b22cfd0a55410b4f$var$Index[emojiIds[emojiIds.length - 1]];
       emojiIds.splice(-1, 1, last);
     }
-
     ($f72b75cf796873c7$export$2e2bcd8739ae039).set("frequently", $b22cfd0a55410b4f$var$Index);
   }
-
   return emojiIds;
 }
-
 var $b22cfd0a55410b4f$export$2e2bcd8739ae039 = {
   add: $b22cfd0a55410b4f$var$add,
   get: $b22cfd0a55410b4f$var$get,
@@ -1847,7 +1644,6 @@ var $b247ea80b67298d5$export$2e2bcd8739ae039 = {
 let $7adb23b0109cc36a$export$dbe3113d60765c1a = null;
 let $7adb23b0109cc36a$export$2d0294657ab35f1b = null;
 const $7adb23b0109cc36a$var$fetchCache = {};
-
 async function $7adb23b0109cc36a$var$fetchJSON(src) {
   if ($7adb23b0109cc36a$var$fetchCache[src]) return $7adb23b0109cc36a$var$fetchCache[src];
   const response = await fetch(src);
@@ -1855,11 +1651,9 @@ async function $7adb23b0109cc36a$var$fetchJSON(src) {
   $7adb23b0109cc36a$var$fetchCache[src] = json;
   return json;
 }
-
 let $7adb23b0109cc36a$var$promise = null;
 let $7adb23b0109cc36a$var$initCallback = null;
 let $7adb23b0109cc36a$var$initialized = false;
-
 function $7adb23b0109cc36a$export$2cd8252107eb640b(options, {
   caller: caller
 } = {}) {
@@ -1869,7 +1663,6 @@ function $7adb23b0109cc36a$export$2cd8252107eb640b(options, {
   if (options) $7adb23b0109cc36a$var$_init(options);else if (caller && !$7adb23b0109cc36a$var$initialized) console.warn(`\`${caller}\` requires data to be initialized first. Promise will be pending until \`init\` is called.`);
   return $7adb23b0109cc36a$var$promise;
 }
-
 async function $7adb23b0109cc36a$var$_init(props) {
   $7adb23b0109cc36a$var$initialized = true;
   let {
@@ -1880,7 +1673,6 @@ async function $7adb23b0109cc36a$var$_init(props) {
   emojiVersion || (emojiVersion = ($b247ea80b67298d5$export$2e2bcd8739ae039).emojiVersion.value);
   set || (set = ($b247ea80b67298d5$export$2e2bcd8739ae039).set.value);
   locale || (locale = ($b247ea80b67298d5$export$2e2bcd8739ae039).locale.value);
-
   if (!$7adb23b0109cc36a$export$2d0294657ab35f1b) {
     $7adb23b0109cc36a$export$2d0294657ab35f1b = (typeof props.data === "function" ? await props.data() : props.data) || (await $7adb23b0109cc36a$var$fetchJSON(`https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/sets/${emojiVersion}/${set}.json`));
     $7adb23b0109cc36a$export$2d0294657ab35f1b.emoticons = {};
@@ -1889,7 +1681,6 @@ async function $7adb23b0109cc36a$var$_init(props) {
       id: "frequent",
       emojis: []
     });
-
     for (const alias in $7adb23b0109cc36a$export$2d0294657ab35f1b.aliases) {
       const emojiId = $7adb23b0109cc36a$export$2d0294657ab35f1b.aliases[alias];
       const emoji = $7adb23b0109cc36a$export$2d0294657ab35f1b.emojis[emojiId];
@@ -1897,14 +1688,12 @@ async function $7adb23b0109cc36a$var$_init(props) {
       emoji.aliases || (emoji.aliases = []);
       emoji.aliases.push(alias);
     }
-
     $7adb23b0109cc36a$export$2d0294657ab35f1b.originalCategories = $7adb23b0109cc36a$export$2d0294657ab35f1b.categories;
   } else $7adb23b0109cc36a$export$2d0294657ab35f1b.categories = $7adb23b0109cc36a$export$2d0294657ab35f1b.categories.filter(c => {
     const isCustom = !!c.name;
     if (!isCustom) return true;
     return false;
   });
-
   $7adb23b0109cc36a$export$dbe3113d60765c1a = (typeof props.i18n === "function" ? await props.i18n() : props.i18n) || (locale == "en" ? (/*@__PURE__*/$parcel$interopDefault($8d50d93417ef682a$exports)) : await $7adb23b0109cc36a$var$fetchJSON(`https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/i18n/${locale}.json`));
   if (props.custom) for (let i in props.custom) {
     i = parseInt(i);
@@ -1915,7 +1704,6 @@ async function $7adb23b0109cc36a$var$_init(props) {
     category.name || (category.name = $7adb23b0109cc36a$export$dbe3113d60765c1a.categories.custom);
     if (prevCategory && !category.icon) category.target = prevCategory.target || prevCategory;
     $7adb23b0109cc36a$export$2d0294657ab35f1b.categories.push(category);
-
     for (const emoji of category.emojis) $7adb23b0109cc36a$export$2d0294657ab35f1b.emojis[emoji.id] = emoji;
   }
   if (props.categories) $7adb23b0109cc36a$export$2d0294657ab35f1b.categories = $7adb23b0109cc36a$export$2d0294657ab35f1b.originalCategories.filter(c => {
@@ -1927,18 +1715,14 @@ async function $7adb23b0109cc36a$var$_init(props) {
   });
   let latestVersionSupport = null;
   let noCountryFlags = null;
-
   if (set == "native") {
     latestVersionSupport = ($c84d045dcc34faf5$export$2e2bcd8739ae039).latestVersion();
     noCountryFlags = props.noCountryFlags || ($c84d045dcc34faf5$export$2e2bcd8739ae039).noCountryFlags();
   }
-
   let categoryIndex = $7adb23b0109cc36a$export$2d0294657ab35f1b.categories.length;
   let resetSearchIndex = false;
-
   while (categoryIndex--) {
     const category = $7adb23b0109cc36a$export$2d0294657ab35f1b.categories[categoryIndex];
-
     if (category.id == "frequent") {
       let {
         maxFrequentRows: maxFrequentRows,
@@ -1951,48 +1735,38 @@ async function $7adb23b0109cc36a$var$_init(props) {
         perLine: perLine
       });
     }
-
     if (!category.emojis || !category.emojis.length) {
       $7adb23b0109cc36a$export$2d0294657ab35f1b.categories.splice(categoryIndex, 1);
       continue;
     }
-
     const {
       categoryIcons: categoryIcons
     } = props;
-
     if (categoryIcons) {
       const icon = categoryIcons[category.id];
       if (icon && !category.icon) category.icon = icon;
     }
-
     let emojiIndex = category.emojis.length;
-
     while (emojiIndex--) {
       const emojiId = category.emojis[emojiIndex];
       const emoji = emojiId.id ? emojiId : $7adb23b0109cc36a$export$2d0294657ab35f1b.emojis[emojiId];
-
       const ignore = () => {
         category.emojis.splice(emojiIndex, 1);
       };
-
       if (!emoji || props.exceptEmojis && props.exceptEmojis.includes(emoji.id)) {
         ignore();
         continue;
       }
-
       if (latestVersionSupport && emoji.version > latestVersionSupport) {
         ignore();
         continue;
       }
-
       if (noCountryFlags && category.id == "flags") {
         if (!($e6eae5155b87f591$export$bcb25aa587e9cb13).includes(emoji.id)) {
           ignore();
           continue;
         }
       }
-
       if (!emoji.search) {
         resetSearchIndex = true;
         emoji.search = "," + [[emoji.id, false], [emoji.name, true], [emoji.keywords, false], [emoji.emoticons, false]].map(([strings, split]) => {
@@ -2006,65 +1780,51 @@ async function $7adb23b0109cc36a$var$_init(props) {
           $7adb23b0109cc36a$export$2d0294657ab35f1b.emoticons[emoticon] = emoji.id;
         }
         let skinIndex = 0;
-
         for (const skin of emoji.skins) {
           if (!skin) continue;
           skinIndex++;
           const {
             native: native
           } = skin;
-
           if (native) {
             $7adb23b0109cc36a$export$2d0294657ab35f1b.natives[native] = emoji.id;
             emoji.search += `,${native}`;
           }
-
           const skinShortcodes = skinIndex == 1 ? "" : `:skin-tone-${skinIndex}:`;
           skin.shortcodes = `:${emoji.id}:${skinShortcodes}`;
         }
       }
     }
   }
-
   if (resetSearchIndex) ($c4d155af13ad4d4b$export$2e2bcd8739ae039).reset();
   $7adb23b0109cc36a$var$initCallback();
 }
-
 function $7adb23b0109cc36a$export$75fe5f91d452f94b(props, defaultProps, element) {
   props || (props = {});
   const _props = {};
-
   for (let k in defaultProps) _props[k] = $7adb23b0109cc36a$export$88c9ddb45cea7241(k, props, defaultProps, element);
-
   return _props;
 }
-
 function $7adb23b0109cc36a$export$88c9ddb45cea7241(propName, props, defaultProps, element) {
   const defaults = defaultProps[propName];
   let value = element && element.getAttribute(propName) || (props[propName] != null && props[propName] != undefined ? props[propName] : null);
   if (!defaults) return value;
-
   if (value != null && defaults.value && typeof defaults.value != typeof value) {
     if (typeof defaults.value == "boolean") value = value == "false" ? false : true;else value = defaults.value.constructor(value);
   }
-
   if (defaults.transform && value) value = defaults.transform(value);
   if (value == null || defaults.choices && defaults.choices.indexOf(value) == -1) value = defaults.value;
   return value;
 }
-
 const $c4d155af13ad4d4b$var$SHORTCODES_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/;
 let $c4d155af13ad4d4b$var$Pool = null;
-
 function $c4d155af13ad4d4b$var$get(emojiId) {
   if (emojiId.id) return emojiId;
   return ($7adb23b0109cc36a$export$2d0294657ab35f1b).emojis[emojiId] || ($7adb23b0109cc36a$export$2d0294657ab35f1b).emojis[($7adb23b0109cc36a$export$2d0294657ab35f1b).aliases[emojiId]] || ($7adb23b0109cc36a$export$2d0294657ab35f1b).emojis[($7adb23b0109cc36a$export$2d0294657ab35f1b).natives[emojiId]];
 }
-
 function $c4d155af13ad4d4b$var$reset() {
   $c4d155af13ad4d4b$var$Pool = null;
 }
-
 async function $c4d155af13ad4d4b$var$search(value, {
   maxResults: maxResults,
   caller: caller
@@ -2080,12 +1840,10 @@ async function $c4d155af13ad4d4b$var$search(value, {
   if (!values.length) return;
   let pool = $c4d155af13ad4d4b$var$Pool || ($c4d155af13ad4d4b$var$Pool = Object.values(($7adb23b0109cc36a$export$2d0294657ab35f1b).emojis));
   let results, scores;
-
   for (const value1 of values) {
     if (!pool.length) break;
     results = [];
     scores = {};
-
     for (const emoji of pool) {
       if (!emoji.search) continue;
       const score = emoji.search.indexOf(`,${value1}`);
@@ -2094,10 +1852,8 @@ async function $c4d155af13ad4d4b$var$search(value, {
       scores[emoji.id] || (scores[emoji.id] = 0);
       scores[emoji.id] += emoji.id == value1 ? 0 : score + 1;
     }
-
     pool = results;
   }
-
   if (results.length < 2) return results;
   results.sort((a, b) => {
     const aScore = scores[a.id];
@@ -2108,7 +1864,6 @@ async function $c4d155af13ad4d4b$var$search(value, {
   if (results.length > maxResults) results = results.slice(0, maxResults);
   return results;
 }
-
 var $c4d155af13ad4d4b$export$2e2bcd8739ae039 = {
   search: $c4d155af13ad4d4b$var$search,
   get: $c4d155af13ad4d4b$var$get,
@@ -2116,15 +1871,12 @@ var $c4d155af13ad4d4b$export$2e2bcd8739ae039 = {
   SHORTCODES_REGEX: $c4d155af13ad4d4b$var$SHORTCODES_REGEX
 };
 const $e6eae5155b87f591$export$bcb25aa587e9cb13 = ["checkered_flag", "crossed_flags", "pirate_flag", "rainbow-flag", "transgender_flag", "triangular_flag_on_post", "waving_black_flag", "waving_white_flag"];
-
 function $693b183b0a78708f$export$9cb4719e2e525b7a(a, b) {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val == b[index]);
 }
-
 async function $693b183b0a78708f$export$e772c8ff12451969(frames = 1) {
   for (let _ in [...Array(frames).keys()]) await new Promise(requestAnimationFrame);
 }
-
 function $693b183b0a78708f$export$d10ac59fbe52a745(emoji, {
   skinIndex = 0
 } = {}) {
@@ -2132,7 +1884,6 @@ function $693b183b0a78708f$export$d10ac59fbe52a745(emoji, {
     skinIndex = 0;
     return emoji.skins[skinIndex];
   })();
-
   const emojiData = {
     id: emoji.id,
     name: emoji.name,
@@ -2147,7 +1898,6 @@ function $693b183b0a78708f$export$d10ac59fbe52a745(emoji, {
   if (emoji.emoticons && emoji.emoticons.length) emojiData.emoticons = emoji.emoticons;
   return emojiData;
 }
-
 const $fcccfb36ed0cde68$var$categories = {
   activity: {
     outline: /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("svg", {
@@ -2331,23 +2081,19 @@ var $fcccfb36ed0cde68$export$2e2bcd8739ae039 = {
   categories: $fcccfb36ed0cde68$var$categories,
   search: $fcccfb36ed0cde68$var$search
 };
-
 function $254755d3f438722f$export$2e2bcd8739ae039(props) {
   let {
     id: id,
     skin: skin,
     emoji: emoji
   } = props;
-
   if (props.shortcodes) {
     const matches = props.shortcodes.match(($c4d155af13ad4d4b$export$2e2bcd8739ae039).SHORTCODES_REGEX);
-
     if (matches) {
       id = matches[1];
       if (matches[2]) skin = matches[2];
     }
   }
-
   emoji || (emoji = ($c4d155af13ad4d4b$export$2e2bcd8739ae039).get(id || props.native));
   if (!emoji) return props.fallback;
   const emojiSkin = emoji.skins[skin - 1] || emoji.skins[0];
@@ -2382,18 +2128,14 @@ function $254755d3f438722f$export$2e2bcd8739ae039(props) {
     })
   });
 }
-
 const $6f57cc9cd54c5aaa$var$WindowHTMLElement = typeof window !== "undefined" && window.HTMLElement ? window.HTMLElement : Object;
-
 class $6f57cc9cd54c5aaa$export$2e2bcd8739ae039 extends $6f57cc9cd54c5aaa$var$WindowHTMLElement {
   static get observedAttributes() {
     return Object.keys(this.Props);
   }
-
   update(props = {}) {
     for (let k in props) this.attributeChangedCallback(k, null, props[k]);
   }
-
   attributeChangedCallback(attr, _, newValue) {
     if (!this.component) return;
     const value = ($7adb23b0109cc36a$export$88c9ddb45cea7241)(attr, {
@@ -2406,16 +2148,13 @@ class $6f57cc9cd54c5aaa$export$2e2bcd8739ae039 extends $6f57cc9cd54c5aaa$var$Win
       this.component.forceUpdate();
     }
   }
-
   disconnectedCallback() {
     this.disconnected = true;
     if (this.component && this.component.unregister) this.component.unregister();
   }
-
   constructor(props = {}) {
     super();
     this.props = props;
-
     if (props.parent || props.ref) {
       let ref = null;
       const parent = props.parent || (ref = props.ref && props.ref.current);
@@ -2423,23 +2162,19 @@ class $6f57cc9cd54c5aaa$export$2e2bcd8739ae039 extends $6f57cc9cd54c5aaa$var$Win
       if (parent) parent.appendChild(this);
     }
   }
-
 }
-
 class $26f27c338a96b1a6$export$2e2bcd8739ae039 extends ($6f57cc9cd54c5aaa$export$2e2bcd8739ae039) {
   setShadow() {
     this.attachShadow({
       mode: "open"
     });
   }
-
   injectStyles(styles) {
     if (!styles) return;
     const style = document.createElement("style");
     style.textContent = styles;
     this.shadowRoot.insertBefore(style, this.shadowRoot.firstChild);
   }
-
   constructor(props, {
     styles: styles
   } = {}) {
@@ -2447,9 +2182,7 @@ class $26f27c338a96b1a6$export$2e2bcd8739ae039 extends ($6f57cc9cd54c5aaa$export
     this.setShadow();
     this.injectStyles(styles);
   }
-
 }
-
 var $3d90f6e46fb2dd47$export$2e2bcd8739ae039 = {
   fallback: "",
   id: "",
@@ -2467,41 +2200,34 @@ var $3d90f6e46fb2dd47$export$2e2bcd8739ae039 = {
   set: ($b247ea80b67298d5$export$2e2bcd8739ae039).set,
   skin: ($b247ea80b67298d5$export$2e2bcd8739ae039).skin
 };
-
 class $331b4160623139bf$export$2e2bcd8739ae039 extends ($6f57cc9cd54c5aaa$export$2e2bcd8739ae039) {
   async connectedCallback() {
     const props = ($7adb23b0109cc36a$export$75fe5f91d452f94b)(this.props, ($3d90f6e46fb2dd47$export$2e2bcd8739ae039), this);
     props.element = this;
-
     props.ref = component => {
       this.component = component;
     };
-
     await ($7adb23b0109cc36a$export$2cd8252107eb640b)();
     if (this.disconnected) return;
-    ($fb96b826c0c5f37a$export$b3890eb0ae9dca99)( /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)(($254755d3f438722f$export$2e2bcd8739ae039), { ...props
+    ($fb96b826c0c5f37a$export$b3890eb0ae9dca99)( /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)(($254755d3f438722f$export$2e2bcd8739ae039), {
+      ...props
     }), this);
   }
-
   constructor(props) {
     super(props);
   }
-
 }
-
 ($c770c458706daa72$export$2e2bcd8739ae039)($331b4160623139bf$export$2e2bcd8739ae039, "Props", ($3d90f6e46fb2dd47$export$2e2bcd8739ae039));
 if (typeof customElements !== "undefined" && !customElements.get("em-emoji")) customElements.define("em-emoji", $331b4160623139bf$export$2e2bcd8739ae039);
 var $1a9a8ef576b7773d$var$r,
-    $1a9a8ef576b7773d$var$i = [],
-    $1a9a8ef576b7773d$var$c = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__b,
-    $1a9a8ef576b7773d$var$f = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__r,
-    $1a9a8ef576b7773d$var$e = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).diffed,
-    $1a9a8ef576b7773d$var$a = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__c,
-    $1a9a8ef576b7773d$var$v = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).unmount;
-
+  $1a9a8ef576b7773d$var$i = [],
+  $1a9a8ef576b7773d$var$c = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__b,
+  $1a9a8ef576b7773d$var$f = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__r,
+  $1a9a8ef576b7773d$var$e = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).diffed,
+  $1a9a8ef576b7773d$var$a = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__c,
+  $1a9a8ef576b7773d$var$v = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).unmount;
 function $1a9a8ef576b7773d$var$x() {
   var t6;
-
   for ($1a9a8ef576b7773d$var$i.sort(function (n11, t7) {
     return n11.__v.__b - t7.__v.__b;
   }); t6 = $1a9a8ef576b7773d$var$i.pop();) if (t6.__P) try {
@@ -2510,7 +2236,6 @@ function $1a9a8ef576b7773d$var$x() {
     t6.__H.__h = [], ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__e(u4, t6.__v);
   }
 }
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__b = function (n12) {
   $1a9a8ef576b7773d$var$c && $1a9a8ef576b7773d$var$c(n12);
 }, ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__r = function (n13) {
@@ -2522,11 +2247,10 @@ function $1a9a8ef576b7773d$var$x() {
   var o6 = t8.__c;
   o6 && o6.__H && o6.__H.__h.length && (1 !== $1a9a8ef576b7773d$var$i.push(o6) && $1a9a8ef576b7773d$var$r === ($fb96b826c0c5f37a$export$41c562ebe57d11e2).requestAnimationFrame || (($1a9a8ef576b7773d$var$r = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).requestAnimationFrame) || function (n14) {
     var t9,
-        u5 = function () {
-      clearTimeout(r9), $1a9a8ef576b7773d$var$b && cancelAnimationFrame(t9), setTimeout(n14);
-    },
-        r9 = setTimeout(u5, 100);
-
+      u5 = function () {
+        clearTimeout(r9), $1a9a8ef576b7773d$var$b && cancelAnimationFrame(t9), setTimeout(n14);
+      },
+      r9 = setTimeout(u5, 100);
     $1a9a8ef576b7773d$var$b && (t9 = requestAnimationFrame(u5));
   })($1a9a8ef576b7773d$var$x));
 }, ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__c = function (t10, u6) {
@@ -2544,7 +2268,7 @@ function $1a9a8ef576b7773d$var$x() {
 }, ($fb96b826c0c5f37a$export$41c562ebe57d11e2).unmount = function (t12) {
   $1a9a8ef576b7773d$var$v && $1a9a8ef576b7773d$var$v(t12);
   var u7,
-      r11 = t12.__c;
+    r11 = t12.__c;
   r11 && r11.__H && (r11.__H.__.forEach(function (n17) {
     try {
       $1a9a8ef576b7773d$var$g(n17);
@@ -2554,105 +2278,80 @@ function $1a9a8ef576b7773d$var$x() {
   }), u7 && ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__e(u7, r11.__v));
 };
 var $1a9a8ef576b7773d$var$b = "function" == typeof requestAnimationFrame;
-
 function $1a9a8ef576b7773d$var$g(n19) {
   var r12 = n19.__c;
   "function" == typeof r12 && (n19.__c = void 0, r12());
 }
-
 function $1a9a8ef576b7773d$var$j(n20) {
   n20.__c = n20.__();
 }
-
 function $dc040a17866866fa$var$S(n1, t1) {
   for (var e1 in t1) n1[e1] = t1[e1];
-
   return n1;
 }
-
 function $dc040a17866866fa$var$C(n2, t2) {
   for (var e2 in n2) if ("__source" !== e2 && !(e2 in t2)) return !0;
-
   for (var r1 in t2) if ("__source" !== r1 && n2[r1] !== t2[r1]) return !0;
-
   return !1;
 }
-
 function $dc040a17866866fa$export$221d75b3f55bb0bd(n3) {
   this.props = n3;
 }
-
 ($dc040a17866866fa$export$221d75b3f55bb0bd.prototype = new ($fb96b826c0c5f37a$export$16fa2f45be04daa8)()).isPureReactComponent = !0, $dc040a17866866fa$export$221d75b3f55bb0bd.prototype.shouldComponentUpdate = function (n6, t5) {
   return $dc040a17866866fa$var$C(this.props, n6) || $dc040a17866866fa$var$C(this.state, t5);
 };
 var $dc040a17866866fa$var$w = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__b;
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__b = function (n7) {
   n7.type && n7.type.__f && n7.ref && (n7.props.ref = n7.ref, n7.ref = null), $dc040a17866866fa$var$w && $dc040a17866866fa$var$w(n7);
 };
-
 var $dc040a17866866fa$var$A = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__e;
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__e = function (n12, t10, e6) {
   if (n12.then) {
     for (var r5, u1 = t10; u1 = u1.__;) if ((r5 = u1.__c) && r5.__c) return null == t10.__e && (t10.__e = e6.__e, t10.__k = e6.__k), r5.__c(n12, t10);
   }
-
   $dc040a17866866fa$var$A(n12, t10, e6);
 };
-
 var $dc040a17866866fa$var$O = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).unmount;
-
 function $dc040a17866866fa$export$74bf444e3cd11ea5() {
   this.__u = 0, this.t = null, this.__b = null;
 }
-
 function $dc040a17866866fa$var$U(n13) {
   var t11 = n13.__.__c;
   return t11 && t11.__e && t11.__e(n13);
 }
-
 function $dc040a17866866fa$export$998bcd577473dd93() {
   this.u = null, this.o = null;
 }
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).unmount = function (n17) {
   var t13 = n17.__c;
   t13 && t13.__R && t13.__R(), t13 && !0 === n17.__h && (n17.type = null), $dc040a17866866fa$var$O && $dc040a17866866fa$var$O(n17);
 }, ($dc040a17866866fa$export$74bf444e3cd11ea5.prototype = new ($fb96b826c0c5f37a$export$16fa2f45be04daa8)()).__c = function (n18, t14) {
   var e8 = t14.__c,
-      r7 = this;
+    r7 = this;
   null == r7.t && (r7.t = []), r7.t.push(e8);
-
   var u4 = $dc040a17866866fa$var$U(r7.__v),
-      o1 = !1,
-      i1 = function () {
-    o1 || (o1 = !0, e8.__R = null, u4 ? u4(l1) : l1());
-  };
-
+    o1 = !1,
+    i1 = function () {
+      o1 || (o1 = !0, e8.__R = null, u4 ? u4(l1) : l1());
+    };
   e8.__R = i1;
-
   var l1 = function () {
-    if (! --r7.__u) {
-      if (r7.state.__e) {
-        var n19 = r7.state.__e;
-
-        r7.__v.__k[0] = function n22(t17, e9, r8) {
-          return t17 && (t17.__v = null, t17.__k = t17.__k && t17.__k.map(function (t18) {
-            return n22(t18, e9, r8);
-          }), t17.__c && t17.__c.__P === e9 && (t17.__e && r8.insertBefore(t17.__e, t17.__d), t17.__c.__e = !0, t17.__c.__P = r8)), t17;
-        }(n19, n19.__c.__P, n19.__c.__O);
+      if (! --r7.__u) {
+        if (r7.state.__e) {
+          var n19 = r7.state.__e;
+          r7.__v.__k[0] = function n22(t17, e9, r8) {
+            return t17 && (t17.__v = null, t17.__k = t17.__k && t17.__k.map(function (t18) {
+              return n22(t18, e9, r8);
+            }), t17.__c && t17.__c.__P === e9 && (t17.__e && r8.insertBefore(t17.__e, t17.__d), t17.__c.__e = !0, t17.__c.__P = r8)), t17;
+          }(n19, n19.__c.__P, n19.__c.__O);
+        }
+        var t15;
+        for (r7.setState({
+          __e: r7.__b = null
+        }); t15 = r7.t.pop();) t15.forceUpdate();
       }
-
-      var t15;
-
-      for (r7.setState({
-        __e: r7.__b = null
-      }); t15 = r7.t.pop();) t15.forceUpdate();
-    }
-  },
-      c1 = !0 === t14.__h;
-
+    },
+    c1 = !0 === t14.__h;
   r7.__u++ || c1 || r7.setState({
     __e: r7.__b = r7.__v.__k[0]
   }), n18.then(i1, i1);
@@ -2662,8 +2361,7 @@ function $dc040a17866866fa$export$998bcd577473dd93() {
   if (this.__b) {
     if (this.__v.__k) {
       var e10 = document.createElement("div"),
-          r9 = this.__v.__k[0].__c;
-
+        r9 = this.__v.__k[0].__c;
       this.__v.__k[0] = function n24(t20, e13, r12) {
         return t20 && (t20.__c && t20.__c.__H && (t20.__c.__H.__.forEach(function (n25) {
           "function" == typeof n25.__c && n25.__c();
@@ -2672,41 +2370,33 @@ function $dc040a17866866fa$export$998bcd577473dd93() {
         })), t20;
       }(this.__b, e10, r9.__O = r9.__P);
     }
-
     this.__b = null;
   }
-
   var u5 = t19.__e && ($fb96b826c0c5f37a$export$c8a8987d4410bf2d)(($fb96b826c0c5f37a$export$ffb0004e005737fa), null, n23.fallback);
   return u5 && (u5.__h = null), [($fb96b826c0c5f37a$export$c8a8987d4410bf2d)(($fb96b826c0c5f37a$export$ffb0004e005737fa), null, t19.__e ? null : n23.children), u5];
 };
-
 var $dc040a17866866fa$var$T = function (n26, t22, e14) {
   if (++e14[1] === e14[0] && n26.o.delete(t22), n26.props.revealOrder && ("t" !== n26.props.revealOrder[0] || !n26.o.size)) for (e14 = n26.u; e14;) {
     for (; e14.length > 3;) e14.pop()();
-
     if (e14[1] < e14[0]) break;
     n26.u = e14 = e14[2];
   }
 };
-
 ($dc040a17866866fa$export$998bcd577473dd93.prototype = new ($fb96b826c0c5f37a$export$16fa2f45be04daa8)()).__e = function (n33) {
   var t25 = this,
-      e16 = $dc040a17866866fa$var$U(t25.__v),
-      r13 = t25.o.get(n33);
+    e16 = $dc040a17866866fa$var$U(t25.__v),
+    r13 = t25.o.get(n33);
   return r13[0]++, function (u6) {
     var o2 = function () {
       t25.props.revealOrder ? (r13.push(u6), $dc040a17866866fa$var$T(t25, n33, r13)) : u6();
     };
-
     e16 ? e16(o2) : o2();
   };
 }, $dc040a17866866fa$export$998bcd577473dd93.prototype.render = function (n34) {
   this.u = null, this.o = new Map();
   var t26 = ($fb96b826c0c5f37a$export$47e4c5b300681277)(n34.children);
   n34.revealOrder && "b" === n34.revealOrder[0] && t26.reverse();
-
   for (var e17 = t26.length; e17--;) this.o.set(t26[e17], this.u = [1, 0, this.u]);
-
   return n34.children;
 }, $dc040a17866866fa$export$998bcd577473dd93.prototype.componentDidUpdate = $dc040a17866866fa$export$998bcd577473dd93.prototype.componentDidMount = function () {
   var n35 = this;
@@ -2714,14 +2404,12 @@ var $dc040a17866866fa$var$T = function (n26, t22, e14) {
     $dc040a17866866fa$var$T(n35, e18, t27);
   });
 };
-
 var $dc040a17866866fa$var$j = "undefined" != typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103,
-    $dc040a17866866fa$var$P = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,
-    $dc040a17866866fa$var$V = "undefined" != typeof document,
-    $dc040a17866866fa$var$z = function (n36) {
-  return ("undefined" != typeof Symbol && "symbol" == typeof Symbol() ? /fil|che|rad/i : /fil|che|ra/i).test(n36);
-};
-
+  $dc040a17866866fa$var$P = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,
+  $dc040a17866866fa$var$V = "undefined" != typeof document,
+  $dc040a17866866fa$var$z = function (n36) {
+    return ("undefined" != typeof Symbol && "symbol" == typeof Symbol() ? /fil|che|rad/i : /fil|che|ra/i).test(n36);
+  };
 ($fb96b826c0c5f37a$export$16fa2f45be04daa8).prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function (n39) {
   Object.defineProperty(($fb96b826c0c5f37a$export$16fa2f45be04daa8).prototype, n39, {
     configurable: !0,
@@ -2738,54 +2426,42 @@ var $dc040a17866866fa$var$j = "undefined" != typeof Symbol && Symbol.for && Symb
   });
 });
 var $dc040a17866866fa$var$H = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).event;
-
 function $dc040a17866866fa$var$Z() {}
-
 function $dc040a17866866fa$var$Y() {
   return this.cancelBubble;
 }
-
 function $dc040a17866866fa$var$q() {
   return this.defaultPrevented;
 }
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).event = function (n40) {
   return $dc040a17866866fa$var$H && (n40 = $dc040a17866866fa$var$H(n40)), n40.persist = $dc040a17866866fa$var$Z, n40.isPropagationStopped = $dc040a17866866fa$var$Y, n40.isDefaultPrevented = $dc040a17866866fa$var$q, n40.nativeEvent = n40;
 };
-
 var $dc040a17866866fa$var$J = {
-  configurable: !0,
-  get: function () {
-    return this.class;
-  }
-},
-    $dc040a17866866fa$var$K = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).vnode;
-
+    configurable: !0,
+    get: function () {
+      return this.class;
+    }
+  },
+  $dc040a17866866fa$var$K = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).vnode;
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).vnode = function (n41) {
   var t31 = n41.type,
-      e21 = n41.props,
-      r14 = e21;
-
+    e21 = n41.props,
+    r14 = e21;
   if ("string" == typeof t31) {
     var u7 = -1 === t31.indexOf("-");
-
     for (var o3 in r14 = {}, e21) {
       var i2 = e21[o3];
       $dc040a17866866fa$var$V && "children" === o3 && "noscript" === t31 || "value" === o3 && "defaultValue" in e21 && null == i2 || ("defaultValue" === o3 && "value" in e21 && null == e21.value ? o3 = "value" : "download" === o3 && !0 === i2 ? i2 = "" : /ondoubleclick/i.test(o3) ? o3 = "ondblclick" : /^onchange(textarea|input)/i.test(o3 + t31) && !$dc040a17866866fa$var$z(e21.type) ? o3 = "oninput" : /^onfocus$/i.test(o3) ? o3 = "onfocusin" : /^onblur$/i.test(o3) ? o3 = "onfocusout" : /^on(Ani|Tra|Tou|BeforeInp)/.test(o3) ? o3 = o3.toLowerCase() : u7 && $dc040a17866866fa$var$P.test(o3) ? o3 = o3.replace(/[A-Z0-9]/, "-$&").toLowerCase() : null === i2 && (i2 = void 0), r14[o3] = i2);
     }
-
     "select" == t31 && r14.multiple && Array.isArray(r14.value) && (r14.value = ($fb96b826c0c5f37a$export$47e4c5b300681277)(e21.children).forEach(function (n42) {
       n42.props.selected = -1 != r14.value.indexOf(n42.props.value);
     })), "select" == t31 && null != r14.defaultValue && (r14.value = ($fb96b826c0c5f37a$export$47e4c5b300681277)(e21.children).forEach(function (n43) {
       n43.props.selected = r14.multiple ? -1 != r14.defaultValue.indexOf(n43.props.value) : r14.defaultValue == n43.props.value;
     })), n41.props = r14, e21.class != e21.className && ($dc040a17866866fa$var$J.enumerable = "className" in e21, null != e21.className && (r14.class = e21.className), Object.defineProperty(r14, "className", $dc040a17866866fa$var$J));
   }
-
   n41.$$typeof = $dc040a17866866fa$var$j, $dc040a17866866fa$var$K && $dc040a17866866fa$var$K(n41);
 };
-
 var $dc040a17866866fa$var$Q = ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__r;
-
 ($fb96b826c0c5f37a$export$41c562ebe57d11e2).__r = function (n44) {
   $dc040a17866866fa$var$Q && $dc040a17866866fa$var$Q(n44), n44.__c;
 };
@@ -2793,13 +2469,11 @@ const $ec8c39fdad15601a$var$THEME_ICONS = {
   light: "outline",
   dark: "solid"
 };
-
 class $ec8c39fdad15601a$export$2e2bcd8739ae039 extends ($dc040a17866866fa$export$221d75b3f55bb0bd) {
   renderIcon(category) {
     const {
       icon: icon
     } = category;
-
     if (icon) {
       if (icon.svg) return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("span", {
         class: "flex",
@@ -2811,12 +2485,10 @@ class $ec8c39fdad15601a$export$2e2bcd8739ae039 extends ($dc040a17866866fa$export
         src: icon.src
       });
     }
-
     const categoryIcons = ($fcccfb36ed0cde68$export$2e2bcd8739ae039).categories[category.id] || ($fcccfb36ed0cde68$export$2e2bcd8739ae039).categories.custom;
     const style = this.props.icons == "auto" ? $ec8c39fdad15601a$var$THEME_ICONS[this.props.theme] : this.props.icons;
     return categoryIcons[style] || categoryIcons;
   }
-
   render() {
     let selectedCategoryIndex = null;
     return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("nav", {
@@ -2856,7 +2528,6 @@ class $ec8c39fdad15601a$export$2e2bcd8739ae039 extends ($dc040a17866866fa$export
       })
     });
   }
-
   constructor() {
     super();
     this.categories = ($7adb23b0109cc36a$export$2d0294657ab35f1b).categories.filter(category => {
@@ -2866,29 +2537,22 @@ class $ec8c39fdad15601a$export$2e2bcd8739ae039 extends ($dc040a17866866fa$export
       categoryId: this.categories[0].id
     };
   }
-
 }
-
 class $e0d4dda61265ff1e$export$2e2bcd8739ae039 extends ($dc040a17866866fa$export$221d75b3f55bb0bd) {
   shouldComponentUpdate(nextProps) {
     for (let k in nextProps) {
       if (k == "children") continue;
       if (nextProps[k] != this.props[k]) return true;
     }
-
     return false;
   }
-
   render() {
     return this.props.children;
   }
-
 }
-
 const $89bd6bb200cc8fef$var$Performance = {
   rowsPerRender: 10
 };
-
 class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export$16fa2f45be04daa8) {
   getInitialState(props = this.props) {
     return {
@@ -2896,7 +2560,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       theme: this.initTheme(props.theme)
     };
   }
-
   componentWillMount() {
     this.dir = ($7adb23b0109cc36a$export$dbe3113d60765c1a).rtl ? "rtl" : "ltr";
     this.refs = {
@@ -2909,17 +2572,14 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       skinToneRadio: ($fb96b826c0c5f37a$export$7d1e3a5e95ceca43)()
     };
     this.initGrid();
-
     if (this.props.stickySearch == false && this.props.searchPosition == "sticky") {
       console.warn("[EmojiMart] Deprecation warning: `stickySearch` has been renamed `searchPosition`.");
       this.props.searchPosition = "static";
     }
   }
-
   componentDidMount() {
     this.register();
     this.shadowRoot = this.base.parentNode;
-
     if (this.props.autoFocus) {
       const {
         searchInput: searchInput
@@ -2927,32 +2587,25 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       if (searchInput.current) searchInput.current.focus();
     }
   }
-
   componentWillReceiveProps(nextProps) {
     this.nextState || (this.nextState = {});
-
     for (const k1 in nextProps) this.nextState[k1] = nextProps[k1];
-
     clearTimeout(this.nextStateTimer);
     this.nextStateTimer = setTimeout(() => {
       let requiresGridReset = false;
-
       for (const k in this.nextState) {
         this.props[k] = this.nextState[k];
         if (k === "custom" || k === "categories") requiresGridReset = true;
       }
-
       delete this.nextState;
       const nextState = this.getInitialState();
       if (requiresGridReset) return this.reset(nextState);
       this.setState(nextState);
     });
   }
-
   componentWillUnmount() {
     this.unregister();
   }
-
   async reset(nextState = {}) {
     await ($7adb23b0109cc36a$export$2cd8252107eb640b)(this.props);
     this.initGrid();
@@ -2962,35 +2615,28 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       this.observeRows();
     });
   }
-
   register() {
     document.addEventListener("click", this.handleClickOutside);
     this.observe();
   }
-
   unregister() {
     document.removeEventListener("click", this.handleClickOutside);
     this.unobserve();
   }
-
   observe() {
     this.observeCategories();
     this.observeRows();
   }
-
   unobserve({
     except = []
   } = {}) {
     if (!Array.isArray(except)) except = [except];
-
     for (const observer of this.observers) {
       if (except.includes(observer)) continue;
       observer.disconnect();
     }
-
     this.observers = [].concat(except);
   }
-
   initGrid() {
     const {
       categories: categories
@@ -3001,7 +2647,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     this.navKey = navKey;
     this.grid = [];
     this.grid.setsize = 0;
-
     const addRow = (rows, category) => {
       const row = [];
       row.__categoryId = category.id;
@@ -3014,27 +2659,22 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       rows.push(rowRef);
       return row;
     };
-
     for (let category1 of categories) {
       const rows = [];
       let row = addRow(rows, category1);
-
       for (let emoji of category1.emojis) {
         if (row.length == this.getPerLine()) row = addRow(rows, category1);
         this.grid.setsize += 1;
         row.push(emoji);
       }
-
       this.refs.categories.set(category1.id, {
         root: ($fb96b826c0c5f37a$export$7d1e3a5e95ceca43)(),
         rows: rows
       });
     }
   }
-
   initTheme(theme) {
     if (theme != "auto") return theme;
-
     if (!this.darkMedia) {
       this.darkMedia = matchMedia("(prefers-color-scheme: dark)");
       if (this.darkMedia.media.match(/^not/)) return "light";
@@ -3045,24 +2685,20 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
         });
       });
     }
-
     return this.darkMedia.matches ? "dark" : "light";
   }
-
   initDynamicPerLine(props = this.props) {
     if (!props.dynamicWidth) return;
     const {
       element: element,
       emojiButtonSize: emojiButtonSize
     } = props;
-
     const calculatePerLine = () => {
       const {
         width: width
       } = element.getBoundingClientRect();
       return Math.floor(width / emojiButtonSize);
     };
-
     const observer = new ResizeObserver(() => {
       this.unobserve({
         except: observer
@@ -3081,29 +2717,24 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     this.observers.push(observer);
     return calculatePerLine();
   }
-
   getPerLine() {
     return this.state.perLine || this.props.perLine;
   }
-
   getEmojiByPos([p1, p2]) {
     const grid = this.state.searchResults || this.grid;
     const emoji = grid[p1] && grid[p1][p2];
     if (!emoji) return;
     return ($c4d155af13ad4d4b$export$2e2bcd8739ae039).get(emoji);
   }
-
   observeCategories() {
     const navigation = this.refs.navigation.current;
     if (!navigation) return;
     const visibleCategories = new Map();
-
     const setFocusedCategory = categoryId => {
       if (categoryId != navigation.state.categoryId) navigation.setState({
         categoryId: categoryId
       });
     };
-
     const observerOptions = {
       root: this.refs.scroll.current,
       threshold: [0.0, 1.0]
@@ -3113,31 +2744,26 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
         const id = entry.target.dataset.id;
         visibleCategories.set(id, entry.intersectionRatio);
       }
-
       const ratios = [...visibleCategories];
-
       for (const [id, ratio] of ratios) if (ratio) {
         setFocusedCategory(id);
         break;
       }
     }, observerOptions);
-
     for (const {
       root: root
     } of this.refs.categories.values()) observer.observe(root.current);
-
     this.observers.push(observer);
   }
-
   observeRows() {
-    const visibleRows = { ...this.state.visibleRows
+    const visibleRows = {
+      ...this.state.visibleRows
     };
     const observer = new IntersectionObserver(entries => {
       for (const entry of entries) {
         const index = parseInt(entry.target.dataset.index);
         if (entry.isIntersecting) visibleRows[index] = true;else delete visibleRows[index];
       }
-
       this.setState({
         visibleRows: visibleRows
       });
@@ -3145,26 +2771,21 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       root: this.refs.scroll.current,
       rootMargin: `${this.props.emojiButtonSize * ($89bd6bb200cc8fef$var$Performance.rowsPerRender + 5)}px 0px ${this.props.emojiButtonSize * $89bd6bb200cc8fef$var$Performance.rowsPerRender}px`
     });
-
     for (const {
       rows: rows
     } of this.refs.categories.values()) {
       for (const row of rows) if (row.current) observer.observe(row.current);
     }
-
     this.observers.push(observer);
   }
-
   preventDefault(e) {
     e.preventDefault();
   }
-
   unfocusSearch() {
     const input = this.refs.searchInput.current;
     if (!input) return;
     input.blur();
   }
-
   navigate({
     e: e,
     input: input,
@@ -3176,53 +2797,42 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     const grid = this.state.searchResults || this.grid;
     if (!grid.length) return;
     let [p1, p2] = this.state.pos;
-
     const pos = (() => {
       if (p1 == 0) {
         if (p2 == 0 && !e.repeat && (left || up)) return null;
       }
-
       if (p1 == -1) {
         if (!e.repeat && (right || down) && input.selectionStart == input.value.length) return [0, 0];
         return null;
       }
-
       if (left || right) {
         let row = grid[p1];
         const increment = left ? -1 : 1;
         p2 += increment;
-
         if (!row[p2]) {
           p1 += increment;
           row = grid[p1];
-
           if (!row) {
             p1 = left ? 0 : grid.length - 1;
             p2 = left ? 0 : grid[p1].length - 1;
             return [p1, p2];
           }
-
           p2 = left ? row.length - 1 : 0;
         }
-
         return [p1, p2];
       }
-
       if (up || down) {
         p1 += up ? -1 : 1;
         const row = grid[p1];
-
         if (!row) {
           p1 = up ? 0 : grid.length - 1;
           p2 = up ? 0 : grid[p1].length - 1;
           return [p1, p2];
         }
-
         if (!row[p2]) p2 = row.length - 1;
         return [p1, p2];
       }
     })();
-
     if (pos) e.preventDefault();else {
       if (this.state.pos[0] > -1) this.setState({
         pos: [-1, -1]
@@ -3238,7 +2848,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       });
     });
   }
-
   scrollTo({
     categoryId: categoryId,
     row: row
@@ -3249,13 +2858,11 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     const scrollRect = scroll.getBoundingClientRect();
     let scrollTop = 0;
     if (row >= 0) categoryId = grid[row].__categoryId;
-
     if (categoryId) {
       const ref = this.refs[categoryId] || this.refs.categories.get(categoryId).root;
       const categoryRect = ref.current.getBoundingClientRect();
       scrollTop = categoryRect.top - (scrollRect.top - scroll.scrollTop) + 1;
     }
-
     if (row >= 0) {
       if (!row) scrollTop = 0;else {
         const rowIndex = grid[row].__index;
@@ -3264,11 +2871,9 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
         if (rowTop < scroll.scrollTop) scrollTop = rowTop;else if (rowBot > scroll.scrollTop + scrollRect.height) scrollTop = rowBot - scrollRect.height;else return;
       }
     }
-
     this.ignoreMouse();
     scroll.scrollTop = scrollTop;
   }
-
   ignoreMouse() {
     this.mouseIsIgnored = true;
     clearTimeout(this.ignoreMouseTimer);
@@ -3276,7 +2881,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       delete this.mouseIsIgnored;
     }, 100);
   }
-
   handleEmojiOver(pos) {
     if (this.mouseIsIgnored || this.state.showSkins) return;
     this.setState({
@@ -3284,7 +2888,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       keyboard: false
     });
   }
-
   handleEmojiClick({
     e: e,
     emoji: emoji,
@@ -3292,7 +2895,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
   }) {
     if (!this.props.onEmojiSelect) return;
     if (!emoji && pos) emoji = this.getEmojiByPos(pos);
-
     if (emoji) {
       const emojiData = ($693b183b0a78708f$export$d10ac59fbe52a745)(emoji, {
         skinIndex: this.state.skin - 1
@@ -3301,7 +2903,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       this.props.onEmojiSelect(emojiData, e);
     }
   }
-
   closeSkins() {
     if (!this.state.showSkins) return;
     this.setState({
@@ -3311,13 +2912,11 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     this.base.removeEventListener("click", this.handleBaseClick);
     this.base.removeEventListener("keydown", this.handleBaseKeydown);
   }
-
   handleSkinMouseOver(tempSkin) {
     this.setState({
       tempSkin: tempSkin
     });
   }
-
   handleSkinClick(skin) {
     this.ignoreMouse();
     this.closeSkins();
@@ -3327,7 +2926,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     });
     ($f72b75cf796873c7$export$2e2bcd8739ae039).set("skin", skin);
   }
-
   renderNav() {
     return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)(($ec8c39fdad15601a$export$2e2bcd8739ae039), {
       ref: this.refs.navigation,
@@ -3339,7 +2937,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       onClick: this.handleCategoryClick
     }, this.navKey);
   }
-
   renderPreview() {
     const emoji = this.getEmojiByPos(this.state.pos);
     const noSearchResults = this.state.searchResults && !this.state.searchResults.length;
@@ -3384,7 +2981,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       }), !emoji && this.props.skinTonePosition == "preview" && this.renderSkinToneButton()]
     });
   }
-
   renderEmojiButton(emoji, {
     pos: pos,
     posinset: posinset,
@@ -3440,7 +3036,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })
     }, key);
   }
-
   renderSearch() {
     const renderSkinTone = this.props.previewPosition == "none" || this.props.skinTonePosition == "search";
     return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("div", {
@@ -3474,7 +3069,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })]
     });
   }
-
   renderSearchResults() {
     const {
       searchResults: searchResults
@@ -3508,7 +3102,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })]
     });
   }
-
   renderCategories() {
     const {
       categories: categories
@@ -3575,7 +3168,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })
     });
   }
-
   renderSkinToneButton() {
     if (this.props.skinTonePosition == "none") return null;
     return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("div", {
@@ -3603,7 +3195,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })
     });
   }
-
   renderLiveRegion() {
     const emoji = this.getEmojiByPos(this.state.pos);
     const contents = emoji ? emoji.name : "";
@@ -3613,7 +3204,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       children: contents
     });
   }
-
   renderSkins() {
     const skinToneButton = this.refs.skinToneButton.current;
     const skinToneButtonRect = skinToneButton.getBoundingClientRect();
@@ -3668,7 +3258,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       })
     });
   }
-
   render() {
     const lineWidth = this.props.perLine * this.props.emojiButtonSize;
     return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("section", {
@@ -3697,14 +3286,12 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       }), this.props.navPosition == "bottom" && this.renderNav(), this.props.previewPosition == "bottom" && this.renderPreview(), this.state.showSkins && this.renderSkins(), this.renderLiveRegion()]
     });
   }
-
   constructor(props) {
     super();
     ($c770c458706daa72$export$2e2bcd8739ae039)(this, "handleClickOutside", e => {
       const {
         element: element
       } = this.props;
-
       if (e.target != element) {
         if (this.state.showSkins) this.closeSkins();
         if (this.props.onClickOutside) this.props.onClickOutside(e);
@@ -3712,7 +3299,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     });
     ($c770c458706daa72$export$2e2bcd8739ae039)(this, "handleBaseClick", e => {
       if (!this.state.showSkins) return;
-
       if (!e.target.closest(".menu")) {
         e.preventDefault();
         e.stopImmediatePropagation();
@@ -3721,7 +3307,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
     });
     ($c770c458706daa72$export$2e2bcd8739ae039)(this, "handleBaseKeydown", e => {
       if (!this.state.showSkins) return;
-
       if (e.key == "Escape") {
         e.preventDefault();
         e.stopImmediatePropagation();
@@ -3742,12 +3327,10 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
         value: value
       } = input;
       const searchResults = await ($c4d155af13ad4d4b$export$2e2bcd8739ae039).search(value);
-
       const afterRender = () => {
         if (!this.refs.scroll.current) return;
         this.refs.scroll.current.scrollTop = 0;
       };
-
       if (!searchResults) return this.setState({
         searchResults: searchResults,
         pos: [-1, -1]
@@ -3756,7 +3339,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       const grid = [];
       grid.setsize = searchResults.length;
       let row = null;
-
       for (let emoji of searchResults) {
         if (!grid.length || row.length == this.getPerLine()) {
           row = [];
@@ -3764,10 +3346,8 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
           row.__index = grid.length;
           grid.push(row);
         }
-
         row.push(emoji);
       }
-
       this.ignoreMouse();
       this.setState({
         searchResults: grid,
@@ -3778,7 +3358,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       // const specialKey = e.altKey || e.ctrlKey || e.metaKey
       const input = e.currentTarget;
       e.stopImmediatePropagation();
-
       switch (e.key) {
         case "ArrowLeft":
           // if (specialKey) return
@@ -3789,7 +3368,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
             left: true
           });
           break;
-
         case "ArrowRight":
           // if (specialKey) return
           // e.preventDefault()
@@ -3799,7 +3377,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
             right: true
           });
           break;
-
         case "ArrowUp":
           // if (specialKey) return
           // e.preventDefault()
@@ -3809,7 +3386,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
             up: true
           });
           break;
-
         case "ArrowDown":
           // if (specialKey) return
           // e.preventDefault()
@@ -3819,7 +3395,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
             down: true
           });
           break;
-
         case "Enter":
           e.preventDefault();
           this.handleEmojiClick({
@@ -3827,7 +3402,6 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
             pos: this.state.pos
           });
           break;
-
         case "Escape":
           e.preventDefault();
           if (this.state.searchResults) this.clearSearch();else this.unfocusSearch();
@@ -3879,32 +3453,26 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
       ...this.getInitialState(props)
     };
   }
-
 }
-
 class $efa000751917694d$export$2e2bcd8739ae039 extends ($26f27c338a96b1a6$export$2e2bcd8739ae039) {
   async connectedCallback() {
     const props = ($7adb23b0109cc36a$export$75fe5f91d452f94b)(this.props, ($b247ea80b67298d5$export$2e2bcd8739ae039), this);
     props.element = this;
-
     props.ref = component => {
       this.component = component;
     };
-
     await ($7adb23b0109cc36a$export$2cd8252107eb640b)(props);
     if (this.disconnected) return;
-    ($fb96b826c0c5f37a$export$b3890eb0ae9dca99)( /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)(($89bd6bb200cc8fef$export$2e2bcd8739ae039), { ...props
+    ($fb96b826c0c5f37a$export$b3890eb0ae9dca99)( /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)(($89bd6bb200cc8fef$export$2e2bcd8739ae039), {
+      ...props
     }), this.shadowRoot);
   }
-
   constructor(props) {
     super(props, {
       styles: (/*@__PURE__*/$parcel$interopDefault($329d53ba9fd7125f$exports))
     });
   }
-
 }
-
 ($c770c458706daa72$export$2e2bcd8739ae039)($efa000751917694d$export$2e2bcd8739ae039, "Props", ($b247ea80b67298d5$export$2e2bcd8739ae039));
 if (typeof customElements !== "undefined" && !customElements.get("em-emoji-picker")) customElements.define("em-emoji-picker", $efa000751917694d$export$2e2bcd8739ae039);
 var $329d53ba9fd7125f$exports = {};
@@ -3915,7 +3483,8 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
   const instance = (React.useRef)(null);
   if (instance.current) instance.current.update(props);
   (React.useEffect)(() => {
-    instance.current = new ($efa000751917694d$export$2e2bcd8739ae039)({ ...props,
+    instance.current = new ($efa000751917694d$export$2e2bcd8739ae039)({
+      ...props,
       ref: ref
     });
     return () => {
@@ -3941,23 +3510,20 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
  * @param {Props} props
  * @return {React.FC}
  */
-
 function EmojiPicker(props) {
   var theme = props.theme,
-      onSelectEmoji = props.onSelectEmoji,
-      disableRecent = props.disableRecent,
-      customEmojis = props.customEmojis,
-      language = props.language;
-  /** @type {string[]} */
+    onSelectEmoji = props.onSelectEmoji,
+    disableRecent = props.disableRecent,
+    customEmojis = props.customEmojis,
+    language = props.language;
 
+  /** @type {string[]} */
   var categories = React.useMemo(function () {
     /** @type {string[]} */
     var categoryies = [];
-
     if (!disableRecent) {
       categoryies.push("frequent");
     }
-
     categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
     return categoryies;
   }, [disableRecent]);
@@ -3965,7 +3531,6 @@ function EmojiPicker(props) {
     if (!language) {
       return undefined;
     }
-
     return require("@emoji-mart/data/i18n/".concat(language !== null && language !== void 0 ? language : 'en', ".json"));
   }, [language]);
   return /*#__PURE__*/React__default["default"].createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
@@ -3979,7 +3544,6 @@ function EmojiPicker(props) {
     i18n: i18n
   });
 }
-
 var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
 
 /**
@@ -3998,15 +3562,14 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
  * @param {Props} props
  * @return {JSX.Element}
  */
-
 function EmojiPickerContainer(_ref) {
   var showPicker = _ref.showPicker,
-      theme = _ref.theme,
-      handleSelectEmoji = _ref.handleSelectEmoji,
-      disableRecent = _ref.disableRecent,
-      customEmojis = _ref.customEmojis,
-      position = _ref.position,
-      language = _ref.language;
+    theme = _ref.theme,
+    handleSelectEmoji = _ref.handleSelectEmoji,
+    disableRecent = _ref.disableRecent,
+    customEmojis = _ref.customEmojis,
+    position = _ref.position,
+    language = _ref.language;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4029,6 +3592,7 @@ function EmojiPickerContainer(_ref) {
 }
 
 var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
+
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
  */
@@ -4047,42 +3611,37 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
  * @property {(fn: PolluteFn) => void} addPolluteFn
  * @property {(html: string) => void} appendContent
  * @property {HTMLDivElement=} buttonElement
+ * @property {React.MutableRefObject=} buttonRef
  * @property {import('../types/types').Languages=} language
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** @type {React.FC<Props>} */
-
 var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
   var theme = props.theme,
-      keepOpened = props.keepOpened,
-      disableRecent = props.disableRecent,
-      customEmojis = props.customEmojis,
-      addSanitizeFn = props.addSanitizeFn,
-      addPolluteFn = props.addPolluteFn,
-      appendContent = props.appendContent,
-      buttonElement = props.buttonElement,
-      language = props.language;
-
+    keepOpened = props.keepOpened,
+    disableRecent = props.disableRecent,
+    customEmojis = props.customEmojis,
+    addSanitizeFn = props.addSanitizeFn,
+    addPolluteFn = props.addPolluteFn,
+    appendContent = props.appendContent,
+    buttonElement = props.buttonElement,
+    buttonRef = props.buttonRef,
+    language = props.language;
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showPicker = _useState2[0],
-      setShowPicker = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    showPicker = _useState2[0],
+    setShowPicker = _useState2[1];
   /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
-
-
   var _useState3 = React.useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      customButton = _useState4[0],
-      setCustomButton = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    customButton = _useState4[0],
+    setCustomButton = _useState4[1];
   /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
-
-
   var _useState5 = React.useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      emojiPickerPosition = _useState6[0],
-      setEmojiPickerPosition = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    emojiPickerPosition = _useState6[0],
+    setEmojiPickerPosition = _useState6[1];
   React.useEffect(function () {
     addSanitizeFn(replaceAllTextEmojiToString);
   }, [addSanitizeFn]);
@@ -4098,24 +3657,21 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       /** @type {HTMLElement} */
       // @ts-ignore
       var element = event.target;
-
       if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
         return;
       }
-
       setShowPicker(false);
     }
-
     document.addEventListener("click", checkClickOutside);
     return function () {
       document.removeEventListener("click", checkClickOutside);
     };
   }, []);
+
   /**
    *
    * @param {React.MouseEvent} event
    */
-
   function toggleShowPicker(event) {
     event.stopPropagation();
     event.preventDefault();
@@ -4124,18 +3680,18 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       return !currentShowPicker;
     });
   }
+
   /**
    * 
    * @param {React.MouseEvent} event
    * @return {'above' | 'below'}
    */
-
-
   function calcTopPosition(event) {
     var btn = event.currentTarget;
     var btnRect = btn.getBoundingClientRect();
-    var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
+    var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
 
+    // Decide to display above or below based on available space
     if (btnRect.top >= popoverHeight) {
       // Display above
       return 'above';
@@ -4143,30 +3699,31 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       // Display below
       return 'below';
     }
-  } // eslint-disable-next-line valid-jsdoc
+  }
 
+  // eslint-disable-next-line valid-jsdoc
   /**
    *
    * @param {import("../types/types").EmojiMartItem} emoji
    */
-
-
   function handleSelectEmoji(emoji) {
     appendContent(getImageEmoji(emoji));
-
     if (!keepOpened) {
       setShowPicker(function (currentShowPicker) {
         return !currentShowPicker;
       });
     }
   }
-
   React.useEffect(function () {
-    if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
+    var _buttonRef$current;
+    if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
+      buttonRef.current.style.position = "relative";
+      setCustomButton(buttonRef.current);
+    } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
       buttonElement.style.position = "relative";
       setCustomButton(buttonElement);
     }
-  }, [buttonElement]);
+  }, [buttonRef, buttonElement]);
   return customButton ? /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
     showPicker: showPicker,
     theme: theme,
@@ -4178,7 +3735,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
   }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker,
-    buttonElement: customButton
+    buttonElement: customButton,
+    buttonRef: buttonRef
   })), customButton) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
     showPicker: showPicker,
     theme: theme,
@@ -4204,37 +3762,34 @@ function getTextFromAtToCaret() {
   if (!range) return null;
   var text = range.text.substring(range.begin, range.end);
   return text || null;
-} // eslint-disable-next-line valid-jsdoc
+}
 
+// eslint-disable-next-line valid-jsdoc
 /** */
-
 function deleteTextFromAtToCaret() {
   var range = getRangeFromAtToCaret();
-  if (!range) return; // @ts-ignore
+  if (!range) return;
 
+  // @ts-ignore
   range.element.deleteData(range.begin, range.end - range.begin);
 }
+
 /**
  *
  * @return {{begin: number, end: number, text: string, element: Node} | null}
  */
-
 function getRangeFromAtToCaret() {
   var elementWithFocus = getElementWithFocus();
-
   if (!elementWithFocus) {
     return null;
   }
-
   var element = elementWithFocus.element,
-      caretOffset = elementWithFocus.caretOffset;
+    caretOffset = elementWithFocus.caretOffset;
   var text = element.textContent;
   var lastAt = text.lastIndexOf("@");
-
   if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
     return null;
   }
-
   return {
     begin: lastAt,
     end: caretOffset,
@@ -4242,49 +3797,46 @@ function getRangeFromAtToCaret() {
     element: element
   };
 }
+
 /**
  *
  * @return {{element: Node, caretOffset: number}}
  */
-
-
 function getElementWithFocus() {
   var element = getSelectionStart();
-
   if (element === null) {
     return null;
   }
-
   var caretOffset = 0;
-
   if (typeof window.getSelection != "undefined") {
     var range = window.getSelection().getRangeAt(0);
     var preCaretRange = range.cloneRange();
     preCaretRange.selectNodeContents(element);
     preCaretRange.setEnd(range.endContainer, range.endOffset);
     caretOffset = preCaretRange.toString().length;
-  } else if ( // @ts-ignore
-  typeof document.selection != "undefined" && // @ts-ignore
+  } else if (
+  // @ts-ignore
+  typeof document.selection != "undefined" &&
+  // @ts-ignore
   document.selection.type != "Control") {
     // @ts-ignore
-    var textRange = document.selection.createRange(); // @ts-ignore
-
+    var textRange = document.selection.createRange();
+    // @ts-ignore
     var preCaretTextRange = document.body.createTextRange();
     preCaretTextRange.moveToElementText(element);
     preCaretTextRange.setEndPoint("EndToEnd", textRange);
     caretOffset = preCaretTextRange.text.length;
   }
-
   return {
     element: element,
     caretOffset: caretOffset
   };
 }
+
 /**
  *
  * @return {Node | null}
  */
-
 function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
@@ -4293,113 +3845,93 @@ function getSelectionStart() {
 /**
  * @typedef {import('../types/types').MentionUser} MentionUser
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /**
  *
  * @param {(text: string) => Promise<MentionUser[]>=} searchMention
  * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
  */
-
 function useMention(searchMention) {
+  var _ref2;
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      loading = _useState2[0],
-      setLoading = _useState2[1];
-  /** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
-
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
 
+  /** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
   var _useState3 = React.useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      mentionUsers = _useState4[0],
-      setMentionUsers = _useState4[1];
-  /** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    mentionUsers = _useState4[0],
+    setMentionUsers = _useState4[1];
 
+  /** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
   var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      mentionSearchText = _useState6[0],
-      setMentionSearchText = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    mentionSearchText = _useState6[0],
+    setMentionSearchText = _useState6[1];
   var onSelectUser = React.useCallback(function () {
     deleteTextFromAtToCaret();
     setMentionUsers([]);
   }, []);
-  /** */
 
+  /** */
   var checkMentionText = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var metionText, users;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            metionText = getTextFromAtToCaret();
-            setMentionSearchText(metionText);
-
-            if (!(metionText === null)) {
-              _context.next = 6;
-              break;
-            }
-
-            setMentionUsers([]);
-            _context.next = 12;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          metionText = getTextFromAtToCaret();
+          setMentionSearchText(metionText);
+          if (!(metionText === null)) {
+            _context.next = 6;
             break;
-
-          case 6:
-            setLoading(true);
-            _context.next = 9;
-            return searchMention(metionText);
-
-          case 9:
-            users = _context.sent;
-            setLoading(false);
-            setMentionUsers(users);
-
-          case 12:
-          case "end":
-            return _context.stop();
-        }
+          }
+          setMentionUsers([]);
+          _context.next = 12;
+          break;
+        case 6:
+          setLoading(true);
+          _context.next = 9;
+          return searchMention(metionText);
+        case 9:
+          users = _context.sent;
+          setLoading(false);
+          setMentionUsers(users);
+        case 12:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   })), [searchMention]);
-  /** @type {(event: React.KeyboardEvent) => void} */
 
-  var onKeyUp = React.useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
+  /** @type {(event: React.KeyboardEvent) => void} */
+  var onKeyUp = React.useCallback(function (_x) {
+    return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
       var _getElementWithFocus;
-
       var elementWithFocus;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(typeof searchMention !== "function")) {
-                _context2.next = 2;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 2:
-              if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
-                elementWithFocus = getElementWithFocus();
-                elementWithFocus.element.parentElement.remove();
-              } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
-                checkMentionText();
-              }
-
-            case 3:
-            case "end":
-              return _context2.stop();
-          }
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(typeof searchMention !== "function")) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
+              elementWithFocus = getElementWithFocus();
+              elementWithFocus.element.parentElement.remove();
+            } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
+              checkMentionText();
+            }
+          case 3:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
-    }));
-
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [checkMentionText, searchMention]);
+    }))).apply(this, arguments);
+  }, [checkMentionText, searchMention]);
   var onFocus = React.useCallback(function () {
     checkMentionText();
   }, [checkMentionText]);
@@ -4432,21 +3964,18 @@ function useMention(searchMention) {
 /**
  * @typedef {{prevUser: () => void; nextUser: () => void;}} Ref
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-
 var MentionUserList = function MentionUserList(_ref, ref) {
   var users = _ref.users,
-      mentionSearchText = _ref.mentionSearchText,
-      onSelect = _ref.onSelect,
-      addEventListener = _ref.addEventListener;
-
+    mentionSearchText = _ref.mentionSearchText,
+    onSelect = _ref.onSelect,
+    addEventListener = _ref.addEventListener;
   var _useState = React.useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedUser = _useState2[0],
-      setSelectedUser = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedUser = _useState2[0],
+    setSelectedUser = _useState2[1];
   React.useImperativeHandle(ref, function () {
     return {
       prevUser: function prevUser() {
@@ -4454,7 +3983,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
           if (currentSelectedUser === 0) {
             return 0;
           }
-
           return currentSelectedUser - 1;
         });
       },
@@ -4463,7 +3991,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
           if (currentSelectedUser === users.length - 1) {
             return users.length - 1;
           }
-
           return currentSelectedUser + 1;
         });
       }
@@ -4472,24 +3999,22 @@ var MentionUserList = function MentionUserList(_ref, ref) {
   React.useEffect(function () {
     setSelectedUser(0);
   }, [users]);
+
   /**
    *
    * @param {string} selectedText
    * @param {string} rest
    * @return {string}
    */
-
   function getMentionSelectedNameEl(selectedText, rest) {
     return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
   }
-  /** @type {(MentionUser & {nameHtml: string})[]} */
-
 
+  /** @type {(MentionUser & {nameHtml: string})[]} */
   var usersFiltered = React.useMemo(function () {
     var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
     return users.map(function (user) {
       var nameHtml = user.name;
-
       if (mentionSearchText && mentionSearchText.length > 1) {
         if (user.name.toLowerCase().startsWith(searchText)) {
           nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
@@ -4499,24 +4024,22 @@ var MentionUserList = function MentionUserList(_ref, ref) {
             if (name.toLocaleLowerCase().startsWith(searchText)) {
               return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
             }
-
             return name;
           }).join(" ");
         }
       }
-
       return _objectSpread2(_objectSpread2({}, user), {}, {
         nameHtml: nameHtml
       });
     });
-  }, [mentionSearchText, users]); // eslint-disable-next-line valid-jsdoc
+  }, [mentionSearchText, users]);
 
+  // eslint-disable-next-line valid-jsdoc
   /**
    *
    * @param {MentionUser} user
    * @returns {(event: React.MouseEvent) => void} event
    */
-
   function handleClick(user) {
     return function (event) {
       event.stopPropagation();
@@ -4524,7 +4047,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
       onSelect(user);
     };
   }
-
   React.useEffect(function () {
     var unsubscribe = addEventListener("enter", function (event) {
       event.stopPropagation();
@@ -4559,7 +4081,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
     })));
   }));
 };
-
 var MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
 MentionUserListWithRef.propTypes = {
   users: t__default["default"].array.isRequired
@@ -4584,32 +4105,27 @@ MentionUserListWithRef.propTypes = {
  * @property {(html: string) => void} appendContent
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** @type {React.FC<Props>} */
-
 var MentionWrapper = function MentionWrapper(_ref) {
   var searchMention = _ref.searchMention,
-      addEventListener = _ref.addEventListener,
-      appendContent = _ref.appendContent,
-      addSanitizeFn = _ref.addSanitizeFn;
-
+    addEventListener = _ref.addEventListener,
+    appendContent = _ref.appendContent,
+    addSanitizeFn = _ref.addSanitizeFn;
   /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
   var metionUserListRef = React.useRef(null);
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showUserList = _useState2[0],
-      setShowUserList = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showUserList = _useState2[0],
+    setShowUserList = _useState2[1];
   var _useMention = useMention(searchMention),
-      mentionSearchText = _useMention.mentionSearchText,
-      mentionUsers = _useMention.mentionUsers,
-      loading = _useMention.loading,
-      onKeyUp = _useMention.onKeyUp,
-      onFocus = _useMention.onFocus,
-      onSelectUser = _useMention.onSelectUser;
-
+    mentionSearchText = _useMention.mentionSearchText,
+    mentionUsers = _useMention.mentionUsers,
+    loading = _useMention.loading,
+    onKeyUp = _useMention.onKeyUp,
+    onFocus = _useMention.onFocus,
+    onSelectUser = _useMention.onSelectUser;
   React.useEffect(function () {
     addSanitizeFn(function (html) {
       var container = document.createElement("div");
@@ -4629,7 +4145,6 @@ var MentionWrapper = function MentionWrapper(_ref) {
     function checkClickOutside() {
       setShowUserList(false);
     }
-
     document.addEventListener("click", checkClickOutside);
     return function () {
       document.removeEventListener("click", checkClickOutside);
@@ -4649,13 +4164,11 @@ var MentionWrapper = function MentionWrapper(_ref) {
     function handleKeyDown(event) {
       switch (event.key) {
         case "Esc": // IE/Edge specific value
-
         case "Escape":
           setShowUserList(false);
           break;
       }
     }
-
     var unsubscribe = addEventListener("keyDown", handleKeyDown);
     return function () {
       unsubscribe();
@@ -4685,16 +4198,15 @@ var MentionWrapper = function MentionWrapper(_ref) {
       };
     }
   }, [addEventListener, showUserList]);
+
   /**
    *
    * @param {MetionUser} user
    */
-
   function handleSelect(user) {
     onSelectUser();
     appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
   }
-
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--container"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4716,8 +4228,8 @@ var MentionWrapper = function MentionWrapper(_ref) {
 };
 
 // @ts-check
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /**
  * @template T
  * @returns {import('../types/types').ListenerObj<T>}
@@ -4739,22 +4251,20 @@ function createObserver() {
         return listener(event);
       });
     },
-
     get currentListerners() {
       return listeners;
     }
-
   };
 }
 
 // @ts-check
+
 /**
  * @typedef {import('../types/types').TextInputListeners} TextInputListeners
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** */
-
 function useEventListeners() {
   /** @type {TextInputListeners} */
   var listeners = React.useMemo(function () {
@@ -4768,11 +4278,11 @@ function useEventListeners() {
       blur: createObserver()
     };
   }, []);
+
   /**
    * @template {keyof TextInputListeners} T, K
    * @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
    */
-
   var addEventListener = React.useCallback(function (event, fn) {
     return listeners[event].subscribe(fn);
   }, [listeners]);
@@ -4783,23 +4293,23 @@ function useEventListeners() {
 }
 
 // @ts-check
+
 /**
  * @typedef {import('../types/types').PolluteFn} PolluteFn
  */
-// eslint-disable-next-line valid-jsdoc
 
+// eslint-disable-next-line valid-jsdoc
 /** */
-
 function usePollute() {
   /** @type {React.MutableRefObject<PolluteFn[]>} */
   var polluteFnsRef = React.useRef([]);
-  /** @type {(fn: PolluteFn) => void} */
 
+  /** @type {(fn: PolluteFn) => void} */
   var addPolluteFn = React.useCallback(function (fn) {
     polluteFnsRef.current.push(fn);
   }, []);
-  /** @type {(html: string) => string} */
 
+  /** @type {(html: string) => string} */
   var pollute = React.useCallback(function (text) {
     var result = polluteFnsRef.current.reduce(function (acc, fn) {
       return fn(acc);
@@ -4813,6 +4323,7 @@ function usePollute() {
 }
 
 // @ts-check
+
 /**
  * @typedef {import('./types/types').MentionUser} MetionUser
  */
@@ -4849,6 +4360,7 @@ function usePollute() {
  * @property {import('./types/types').Languages=} language
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
  * @property {HTMLDivElement=} buttonElement
+ * @property {React.MutableRefObject=} buttonRef
  */
 
 /**
@@ -4857,50 +4369,46 @@ function usePollute() {
  * @param {React.Ref<any>} ref
  * @return {JSX.Element}
  */
-
 function InputEmoji(props, ref) {
   var onChange = props.onChange,
-      onEnter = props.onEnter,
-      shouldReturn = props.shouldReturn,
-      onResize = props.onResize,
-      onClick = props.onClick,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onKeyDown = props.onKeyDown,
-      theme = props.theme,
-      cleanOnEnter = props.cleanOnEnter,
-      placeholder = props.placeholder,
-      maxLength = props.maxLength,
-      keepOpened = props.keepOpened,
-      inputClass = props.inputClass,
-      disableRecent = props.disableRecent,
-      tabIndex = props.tabIndex,
-      value = props.value,
-      customEmojis = props.customEmojis,
-      language = props.language,
-      searchMention = props.searchMention,
-      buttonElement = props.buttonElement,
-      borderRadius = props.borderRadius,
-      borderColor = props.borderColor,
-      fontSize = props.fontSize,
-      fontFamily = props.fontFamily;
-  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
+    onEnter = props.onEnter,
+    shouldReturn = props.shouldReturn,
+    onResize = props.onResize,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    theme = props.theme,
+    cleanOnEnter = props.cleanOnEnter,
+    placeholder = props.placeholder,
+    maxLength = props.maxLength,
+    keepOpened = props.keepOpened,
+    inputClass = props.inputClass,
+    disableRecent = props.disableRecent,
+    tabIndex = props.tabIndex,
+    value = props.value,
+    customEmojis = props.customEmojis,
+    language = props.language,
+    searchMention = props.searchMention,
+    buttonElement = props.buttonElement,
+    buttonRef = props.buttonRef,
+    borderRadius = props.borderRadius,
+    borderColor = props.borderColor,
+    fontSize = props.fontSize,
+    fontFamily = props.fontFamily;
 
+  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = React.useRef(null);
-
   var _useEventListeners = useEventListeners(),
-      addEventListener = _useEventListeners.addEventListener,
-      listeners = _useEventListeners.listeners;
-
+    addEventListener = _useEventListeners.addEventListener,
+    listeners = _useEventListeners.listeners;
   var _useSanitize = useSanitize(props.shouldReturn),
-      addSanitizeFn = _useSanitize.addSanitizeFn,
-      sanitize = _useSanitize.sanitize,
-      sanitizedTextRef = _useSanitize.sanitizedTextRef;
-
+    addSanitizeFn = _useSanitize.addSanitizeFn,
+    sanitize = _useSanitize.sanitize,
+    sanitizedTextRef = _useSanitize.sanitizedTextRef;
   var _usePollute = usePollute(),
-      addPolluteFn = _usePollute.addPolluteFn,
-      pollute = _usePollute.pollute;
-
+    addPolluteFn = _usePollute.addPolluteFn,
+    pollute = _usePollute.pollute;
   var updateHTML = React.useCallback(function () {
     var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
     if (textInputRef.current === null) return;
@@ -4926,7 +4434,9 @@ function InputEmoji(props, ref) {
     if (sanitizedTextRef.current !== value) {
       setValue(value);
     }
-  }, [sanitizedTextRef, setValue, value]); // useEffect(() => {
+  }, [sanitizedTextRef, setValue, value]);
+
+  // useEffect(() => {
   //   updateHTML();
   // }, [updateHTML]);
 
@@ -4940,34 +4450,26 @@ function InputEmoji(props, ref) {
       if (typeof maxLength !== "undefined" && event.key !== "Backspace" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
         event.preventDefault();
       }
-
       if (event.key === "Enter" && textInputRef.current) {
         event.preventDefault();
         var text = sanitize(textInputRef.current.html);
         emitChange(sanitizedTextRef.current);
-
         if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
           onEnter(text);
         }
-
         if (cleanOnEnter && listeners.enter.currentListerners.length === 0) {
           updateHTML("");
         }
-
         if (typeof onKeyDown === "function") {
           onKeyDown(event.nativeEvent);
         }
-
         return false;
       }
-
       if (typeof onKeyDown === "function") {
         onKeyDown(event.nativeEvent);
       }
-
       return true;
     }
-
     var unsubscribe = addEventListener("keyDown", handleKeydown);
     return function () {
       unsubscribe();
@@ -4979,12 +4481,10 @@ function InputEmoji(props, ref) {
       if (typeof onClick === "function") {
         onClick();
       }
-
       if (typeof onFocus === "function") {
         onFocus();
       }
     }
-
     var unsubscribe = addEventListener("focus", handleFocus);
     return function () {
       unsubscribe();
@@ -4997,82 +4497,70 @@ function InputEmoji(props, ref) {
         onBlur();
       }
     }
-
     var unsubscribe = addEventListener("blur", handleBlur);
     return function () {
       unsubscribe();
     };
   }, [addEventListener, onBlur]);
+
   /**
    *
    * @param {string} html
    */
-
   function handleTextInputChange(html) {
     sanitize(html);
-
     if (value !== sanitizedTextRef.current) {
       emitChange(sanitizedTextRef.current);
     }
   }
+
   /**
    *
    * @param {string} html
    */
-
-
   function appendContent(html) {
     if (typeof maxLength !== "undefined" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
       return;
     }
-
     if (textInputRef.current !== null) {
       textInputRef.current.appendContent(html);
     }
   }
+
   /**
    * Handle copy of current selected text
    * @param {React.ClipboardEvent} event
    */
-
-
   function handleCopy(event) {
     var selection = window.getSelection();
-
     if (selection !== null) {
       var selectedText = '';
-
       if (selection.anchorNode && selection.anchorNode.nodeType === Node.ELEMENT_NODE) {
         // @ts-ignore
         selectedText = selection.anchorNode.innerHTML;
       } else if (selection.anchorNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
         var _selection$anchorNode;
-
         selectedText = (_selection$anchorNode = selection.anchorNode.textContent) !== null && _selection$anchorNode !== void 0 ? _selection$anchorNode : '';
       }
-
       var text = replaceAllTextEmojiToString(selectedText);
       event.clipboardData.setData("text", text);
       event.preventDefault();
     }
   }
+
   /**
    * Handle past on input
    * @param {React.ClipboardEvent} event
    */
-
-
   function handlePaste(event) {
     event.preventDefault();
     var content;
-
     if (event.clipboardData) {
       content = event.clipboardData.getData("text/plain");
       content = pollute(content);
       document.execCommand("insertHTML", false, content);
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji"
   }, /*#__PURE__*/React__default["default"].createElement(MentionWrapper, {
@@ -5111,15 +4599,13 @@ function InputEmoji(props, ref) {
     addPolluteFn: addPolluteFn,
     appendContent: appendContent,
     buttonElement: buttonElement,
+    buttonRef: buttonRef,
     language: language
   }));
 }
-
 var InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
-  theme:
-  /** @type {const} */
-  "auto",
+  theme: /** @type {const} */"auto",
   height: 30,
   placeholder: "Type a message",
   borderRadius: 21,