emoji-picker-react 4.6.6 → 4.6.7

package/dist/emoji-picker-react.cjs.development.js

@@ -9,7 +9,6 @@ var React__default = _interopDefault(React);
 var flairup = require('flairup');
 
 var ClassNames;
-
 (function (ClassNames) {
   ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
   ClassNames["searchActive"] = "epr-search-active";
@@ -32,12 +31,10 @@ var ClassNames;
   ClassNames["darkTheme"] = "epr-dark-theme";
   ClassNames["autoTheme"] = "epr-auto-theme";
 })(ClassNames || (ClassNames = {}));
-
 function asSelectors() {
   for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
     classNames[_key] = arguments[_key];
   }
-
   return classNames.map(function (c) {
     return "." + c;
   }).join('');
@@ -64,7 +61,6 @@ function focusElement(element) {
   if (!element) {
     return;
   }
-
   requestAnimationFrame(function () {
     element.focus();
   });
@@ -115,11 +111,9 @@ var ElementRefContext = /*#__PURE__*/React.createContext({
   SkinTonePickerRef: /*#__PURE__*/React.createRef(),
   VariationPickerRef: /*#__PURE__*/React.createRef()
 });
-
 function useElementRef() {
   return React.useContext(ElementRefContext);
 }
-
 function usePickerMainRef() {
   return useElementRef()['PickerMainRef'];
 }
@@ -132,7 +126,6 @@ function useSetAnchoredEmojiRef() {
     if (target === null && AnchoredEmojiRef.current !== null) {
       focusElement(AnchoredEmojiRef.current);
     }
-
     AnchoredEmojiRef.current = target;
   };
 }
@@ -156,26 +149,21 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -183,22 +171,18 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
 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 _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -207,19 +191,14 @@ 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 _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it) return (it = it.call(o)).next.bind(it);
-
   if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
     if (it) o = it;
     var i = 0;
@@ -233,7 +212,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
       };
     };
   }
-
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
@@ -241,7 +219,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   SuggestionMode["RECENT"] = "recent";
   SuggestionMode["FREQUENT"] = "frequent";
 })(exports.SuggestionMode || (exports.SuggestionMode = {}));
-
 (function (EmojiStyle) {
   EmojiStyle["NATIVE"] = "native";
   EmojiStyle["APPLE"] = "apple";
@@ -249,13 +226,11 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   EmojiStyle["GOOGLE"] = "google";
   EmojiStyle["FACEBOOK"] = "facebook";
 })(exports.EmojiStyle || (exports.EmojiStyle = {}));
-
 (function (Theme) {
   Theme["DARK"] = "dark";
   Theme["LIGHT"] = "light";
   Theme["AUTO"] = "auto";
 })(exports.Theme || (exports.Theme = {}));
-
 (function (SkinTones) {
   SkinTones["NEUTRAL"] = "neutral";
   SkinTones["LIGHT"] = "1f3fb";
@@ -264,7 +239,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   SkinTones["MEDIUM_DARK"] = "1f3fe";
   SkinTones["DARK"] = "1f3ff";
 })(exports.SkinTones || (exports.SkinTones = {}));
-
 (function (Categories) {
   Categories["SUGGESTED"] = "suggested";
   Categories["CUSTOM"] = "custom";
@@ -277,7 +251,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   Categories["SYMBOLS"] = "symbols";
   Categories["FLAGS"] = "flags";
 })(exports.Categories || (exports.Categories = {}));
-
 (function (SkinTonePickerLocation) {
   SkinTonePickerLocation["SEARCH"] = "SEARCH";
   SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
@@ -333,41 +306,31 @@ function categoryNameFromCategoryConfig(category) {
 }
 function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
   var _userCategoriesConfig;
-
   if (userCategoriesConfig === void 0) {
     userCategoriesConfig = [];
   }
-
   if (modifiers === void 0) {
     modifiers = {};
   }
-
   var extra = {};
-
   if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
     extra[exports.Categories.SUGGESTED] = SuggestedRecent;
   }
-
   var base = baseCategoriesConfig(extra);
-
   if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
     return base;
   }
-
   return userCategoriesConfig.map(function (category) {
     if (typeof category === 'string') {
       return getBaseConfigByCategory(category, extra[category]);
     }
-
     return _extends({}, getBaseConfigByCategory(category.category, extra[category.category]), category);
   });
 }
-
 function getBaseConfigByCategory(category, modifier) {
   if (modifier === void 0) {
     modifier = {};
   }
-
   return Object.assign(configByCategory[category], modifier);
 }
 
@@ -379,13 +342,10 @@ function cdnUrl(emojiStyle) {
   switch (emojiStyle) {
     case exports.EmojiStyle.TWITTER:
       return CDN_URL_TWITTER;
-
     case exports.EmojiStyle.GOOGLE:
       return CDN_URL_GOOGLE;
-
     case exports.EmojiStyle.FACEBOOK:
       return CDN_URL_FACEBOOK;
-
     case exports.EmojiStyle.APPLE:
     default:
       return CDN_URL_APPLE;
@@ -16718,18 +16678,16 @@ var emojis = {
 var skinToneVariations = [exports.SkinTones.NEUTRAL, exports.SkinTones.LIGHT, exports.SkinTones.MEDIUM_LIGHT, exports.SkinTones.MEDIUM, exports.SkinTones.MEDIUM_DARK, exports.SkinTones.DARK];
 var skinTonesNamed = /*#__PURE__*/Object.entries(exports.SkinTones).reduce(function (acc, _ref) {
   var key = _ref[0],
-      value = _ref[1];
+    value = _ref[1];
   acc[value] = key;
   return acc;
 }, {});
 var skinTonesMapped = /*#__PURE__*/skinToneVariations.reduce(function (mapped, skinTone) {
   var _Object$assign;
-
   return Object.assign(mapped, (_Object$assign = {}, _Object$assign[skinTone] = skinTone, _Object$assign));
 }, {});
 
 var EmojiProperties;
-
 (function (EmojiProperties) {
   EmojiProperties["name"] = "n";
   EmojiProperties["unified"] = "u";
@@ -16749,7 +16707,6 @@ function indexEmoji(emoji) {
   var joinedNameString = emojiNames(emoji).flat().join('').toLowerCase().replace(/[^a-zA-Z\d]/g, '').split('');
   joinedNameString.forEach(function (_char) {
     var _alphaNumericEmojiInd;
-
     alphaNumericEmojiIndex[_char] = (_alphaNumericEmojiInd = alphaNumericEmojiIndex[_char]) != null ? _alphaNumericEmojiInd : {};
     alphaNumericEmojiIndex[_char][emojiUnified(emoji)] = emoji;
   });
@@ -16757,7 +16714,6 @@ function indexEmoji(emoji) {
 
 function emojiNames(emoji) {
   var _emoji$EmojiPropertie;
-
   return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
 }
 function addedIn(emoji) {
@@ -16767,45 +16723,36 @@ function emojiName(emoji) {
   if (!emoji) {
     return '';
   }
-
   return emojiNames(emoji)[0];
 }
 function unifiedWithoutSkinTone(unified) {
   var splat = unified.split('-');
-
   var _splat$splice = splat.splice(1, 1),
-      skinTone = _splat$splice[0];
-
+    skinTone = _splat$splice[0];
   if (skinTonesMapped[skinTone]) {
     return splat.join('-');
   }
-
   return unified;
 }
 function emojiUnified(emoji, skinTone) {
   var _emojiVariationUnifie;
-
   var unified = emoji[EmojiProperties.unified];
-
   if (!skinTone || !emojiHasVariations(emoji)) {
     return unified;
   }
-
   return (_emojiVariationUnifie = emojiVariationUnified(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
 }
 function emojisByCategory(category) {
   var _emojis$category;
-
   // @ts-ignore
   return (_emojis$category = emojis == null ? void 0 : emojis[category]) != null ? _emojis$category : [];
-} // WARNING: DO NOT USE DIRECTLY
-
+}
+// WARNING: DO NOT USE DIRECTLY
 function emojiUrlByUnified(unified, emojiStyle) {
   return "" + cdnUrl(emojiStyle) + unified + ".png";
 }
 function emojiVariations(emoji) {
   var _emoji$EmojiPropertie2;
-
   return (_emoji$EmojiPropertie2 = emoji[EmojiProperties.variations]) != null ? _emoji$EmojiPropertie2 : [];
 }
 function emojiHasVariations(emoji) {
@@ -16820,11 +16767,9 @@ function emojiByUnified(unified) {
   if (!unified) {
     return;
   }
-
   if (allEmojisByUnified[unified]) {
     return allEmojisByUnified[unified];
   }
-
   var withoutSkinTone = unifiedWithoutSkinTone(unified);
   return allEmojisByUnified[withoutSkinTone];
 }
@@ -16834,43 +16779,35 @@ function setCustomEmojis(customEmojis) {
   customEmojis.forEach(function (emoji) {
     var emojiData = customToRegularEmoji(emoji);
     emojis[exports.Categories.CUSTOM].push(emojiData);
-
     if (allEmojisByUnified[emojiData[EmojiProperties.unified]]) {
       return;
     }
-
     allEmojis.push(emojiData);
     allEmojisByUnified[emojiData[EmojiProperties.unified]] = emojiData;
     indexEmoji(emojiData);
   });
 }
-
 function customToRegularEmoji(emoji) {
   var _ref;
-
   return _ref = {}, _ref[EmojiProperties.name] = emoji.names.map(function (name) {
     return name.toLowerCase();
   }), _ref[EmojiProperties.unified] = emoji.id.toLowerCase(), _ref[EmojiProperties.added_in] = '0', _ref[EmojiProperties.imgUrl] = emoji.imgUrl, _ref;
 }
-
 var allEmojisByUnified = {};
 setTimeout(function () {
   allEmojis.reduce(function (allEmojis, Emoji) {
     allEmojis[emojiUnified(Emoji)] = Emoji;
-
     if (emojiHasVariations(Emoji)) {
       emojiVariations(Emoji).forEach(function (variation) {
         allEmojis[variation] = Emoji;
       });
     }
-
     return allEmojis;
   }, allEmojisByUnified);
 });
 function activeVariationFromUnified(unified) {
   var _unified$split = unified.split('-'),
-      suspectedSkinTone = _unified$split[1];
-
+    suspectedSkinTone = _unified$split[1];
   return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
 }
 
@@ -16882,11 +16819,9 @@ var SEARCH_RESULTS_ONE_RESULT_FOUND = '1 result' + SEARCH_RESULTS_SUFFIX;
 var SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND = '%n results' + SEARCH_RESULTS_SUFFIX;
 function mergeConfig(userConfig) {
   var _userConfig$previewCo, _config$customEmojis;
-
   if (userConfig === void 0) {
     userConfig = {};
   }
-
   var base = basePickerConfig();
   var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
   var config = Object.assign(base, userConfig);
@@ -16936,8 +16871,7 @@ var _excluded = ["children"];
 var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
 function PickerConfigProvider(_ref) {
   var children = _ref.children,
-      config = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    config = _objectWithoutPropertiesLoose(_ref, _excluded);
   var mergedConfig = useSetConfig(config);
   return React.createElement(ConfigContext.Provider, {
     value: mergedConfig
@@ -16945,21 +16879,18 @@ function PickerConfigProvider(_ref) {
 }
 function useSetConfig(config) {
   var _config$customEmojis2;
-
   var _React$useState = React.useState(function () {
-    return mergeConfig(config);
-  }),
-      mergedConfig = _React$useState[0],
-      setMergedConfig = _React$useState[1];
-
+      return mergeConfig(config);
+    }),
+    mergedConfig = _React$useState[0],
+    setMergedConfig = _React$useState[1];
   React.useEffect(function () {
     var _config$customEmojis, _mergedConfig$customE;
-
     if (((_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length) !== ((_mergedConfig$customE = mergedConfig.customEmojis) == null ? void 0 : _mergedConfig$customE.length)) {
       setMergedConfig(mergeConfig(config));
-    } // not gonna...
+    }
+    // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-
   }, [(_config$customEmojis2 = config.customEmojis) == null ? void 0 : _config$customEmojis2.length]);
   return mergedConfig;
 }
@@ -16981,98 +16912,82 @@ function useDefineMutableConfig(config) {
   }, [config.onEmojiClick]);
   return MutableConfigRef;
 }
-
 function emptyFunc() {}
 
 function useSearchPlaceHolderConfig() {
   var _find;
-
   var _usePickerConfig = usePickerConfig(),
-      searchPlaceHolder = _usePickerConfig.searchPlaceHolder,
-      searchPlaceholder = _usePickerConfig.searchPlaceholder;
-
+    searchPlaceHolder = _usePickerConfig.searchPlaceHolder,
+    searchPlaceholder = _usePickerConfig.searchPlaceholder;
   return (_find = [searchPlaceHolder, searchPlaceholder].find(function (p) {
     return p !== DEFAULT_SEARCH_PLACEHOLDER;
   })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
 }
 function useDefaultSkinToneConfig() {
   var _usePickerConfig2 = usePickerConfig(),
-      defaultSkinTone = _usePickerConfig2.defaultSkinTone;
-
+    defaultSkinTone = _usePickerConfig2.defaultSkinTone;
   return defaultSkinTone;
 }
 function useSkinTonesDisabledConfig() {
   var _usePickerConfig3 = usePickerConfig(),
-      skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
-
+    skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
   return skinTonesDisabled;
 }
 function useEmojiStyleConfig() {
   var _usePickerConfig4 = usePickerConfig(),
-      emojiStyle = _usePickerConfig4.emojiStyle;
-
+    emojiStyle = _usePickerConfig4.emojiStyle;
   return emojiStyle;
 }
 function useAutoFocusSearchConfig() {
   var _usePickerConfig5 = usePickerConfig(),
-      autoFocusSearch = _usePickerConfig5.autoFocusSearch;
-
+    autoFocusSearch = _usePickerConfig5.autoFocusSearch;
   return autoFocusSearch;
 }
 function useCategoriesConfig() {
   var _usePickerConfig6 = usePickerConfig(),
-      categories = _usePickerConfig6.categories;
-
+    categories = _usePickerConfig6.categories;
   return categories;
 }
 function useCustomEmojisConfig() {
   var _usePickerConfig7 = usePickerConfig(),
-      customEmojis = _usePickerConfig7.customEmojis;
-
+    customEmojis = _usePickerConfig7.customEmojis;
   return customEmojis;
 }
 function useOnEmojiClickConfig() {
   var _useMutableConfig = useMutableConfig(),
-      current = _useMutableConfig.current;
-
+    current = _useMutableConfig.current;
   return current.onEmojiClick || function () {};
 }
 function usePreviewConfig() {
   var _usePickerConfig8 = usePickerConfig(),
-      previewConfig = _usePickerConfig8.previewConfig;
-
+    previewConfig = _usePickerConfig8.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
   var _usePickerConfig9 = usePickerConfig(),
-      theme = _usePickerConfig9.theme;
-
+    theme = _usePickerConfig9.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
   var _usePickerConfig10 = usePickerConfig(),
-      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
-
+    suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
   var _usePickerConfig11 = usePickerConfig(),
-      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
-
+    lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
   var _usePickerConfig12 = usePickerConfig(),
-      className = _usePickerConfig12.className;
-
+    className = _usePickerConfig12.className;
   return className;
 }
 function useStyleConfig() {
   var _usePickerConfig13 = usePickerConfig(),
-      height = _usePickerConfig13.height,
-      width = _usePickerConfig13.width,
-      style = _usePickerConfig13.style;
-
+    height = _usePickerConfig13.height,
+    width = _usePickerConfig13.width,
+    style = _usePickerConfig13.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
@@ -17080,47 +16995,38 @@ function useStyleConfig() {
 }
 function useEmojiVersionConfig() {
   var _usePickerConfig14 = usePickerConfig(),
-      emojiVersion = _usePickerConfig14.emojiVersion;
-
+    emojiVersion = _usePickerConfig14.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
   var _usePickerConfig15 = usePickerConfig(),
-      searchDisabled = _usePickerConfig15.searchDisabled;
-
+    searchDisabled = _usePickerConfig15.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
   var _usePickerConfig16 = usePickerConfig(),
-      skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
-
+    skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
   var _usePickerConfig17 = usePickerConfig(),
-      unicodeToHide = _usePickerConfig17.unicodeToHide;
-
+    unicodeToHide = _usePickerConfig17.unicodeToHide;
   return unicodeToHide;
 }
 function useGetEmojiUrlConfig() {
   var _usePickerConfig18 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig18.getEmojiUrl;
-
+    getEmojiUrl = _usePickerConfig18.getEmojiUrl;
   return getEmojiUrl;
 }
-
 function getDimension(dimensionConfig) {
   return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
 }
-
 function useSearchResultsConfig(searchResultsCount) {
   var hasResults = searchResultsCount > 0;
   var isPlural = searchResultsCount > 1;
-
   if (hasResults) {
     return isPlural ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString()) : SEARCH_RESULTS_ONE_RESULT_FOUND;
   }
-
   return SEARCH_RESULTS_NO_RESULTS_FOUND;
 }
 
@@ -17128,28 +17034,22 @@ function useDebouncedState(initialValue, delay) {
   if (delay === void 0) {
     delay = 0;
   }
-
   var _useState = React.useState(initialValue),
-      state = _useState[0],
-      setState = _useState[1];
-
+    state = _useState[0],
+    setState = _useState[1];
   var timer = React.useRef(null);
-
   function debouncedSetState(value) {
     return new Promise(function (resolve) {
       var _window;
-
       if (timer.current) {
         clearTimeout(timer.current);
       }
-
       timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
         setState(value);
         resolve(value);
       }, delay);
     });
   }
-
   return [state, debouncedSetState];
 }
 
@@ -17165,16 +17065,13 @@ function useDisallowedEmojis() {
   var emojiVersionConfig = useEmojiVersionConfig();
   return React.useMemo(function () {
     var emojiVersion = parseFloat("" + emojiVersionConfig);
-
     if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
       return DisallowedEmojisRef.current;
     }
-
     return allEmojis.reduce(function (disallowedEmojis, emoji) {
       if (addedInNewerVersion(emoji, emojiVersion)) {
         disallowedEmojis[emojiUnified(emoji)] = true;
       }
-
       return disallowedEmojis;
     }, DisallowedEmojisRef.current);
   }, [emojiVersionConfig]);
@@ -17187,7 +17084,6 @@ function useIsEmojiDisallowed() {
     return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
   };
 }
-
 function addedInNewerVersion(emoji, supportedLevel) {
   return addedIn(emoji) > supportedLevel;
 }
@@ -17201,8 +17097,8 @@ function useMarkInitialLoad(dispatch) {
 function PickerContextProvider(_ref) {
   var children = _ref.children;
   var disallowedEmojis = useDisallowedEmojis();
-  var defaultSkinTone = useDefaultSkinToneConfig(); // Initialize the filter with the inititial dictionary
-
+  var defaultSkinTone = useDefaultSkinToneConfig();
+  // Initialize the filter with the inititial dictionary
   var filterRef = React.useRef(alphaNumericEmojiIndex);
   var disallowClickRef = React.useRef(false);
   var disallowMouseRef = React.useRef(false);
@@ -17214,11 +17110,9 @@ function PickerContextProvider(_ref) {
   var activeCategoryState = React.useState(null);
   var emojisThatFailedToLoadState = React.useState(new Set());
   var emojiVariationPickerState = React.useState(null);
-
   var _useState = React.useState(false),
-      isPastInitialLoad = _useState[0],
-      setIsPastInitialLoad = _useState[1];
-
+    isPastInitialLoad = _useState[0],
+    setIsPastInitialLoad = _useState[1];
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
@@ -17265,64 +17159,54 @@ var PickerContext = /*#__PURE__*/React.createContext({
 });
 function useFilterRef() {
   var _React$useContext = React.useContext(PickerContext),
-      filterRef = _React$useContext.filterRef;
-
+    filterRef = _React$useContext.filterRef;
   return filterRef;
 }
 function useDisallowClickRef() {
   var _React$useContext2 = React.useContext(PickerContext),
-      disallowClickRef = _React$useContext2.disallowClickRef;
-
+    disallowClickRef = _React$useContext2.disallowClickRef;
   return disallowClickRef;
 }
 function useDisallowMouseRef() {
   var _React$useContext3 = React.useContext(PickerContext),
-      disallowMouseRef = _React$useContext3.disallowMouseRef;
-
+    disallowMouseRef = _React$useContext3.disallowMouseRef;
   return disallowMouseRef;
 }
 function useSearchTermState() {
   var _React$useContext4 = React.useContext(PickerContext),
-      searchTerm = _React$useContext4.searchTerm;
-
+    searchTerm = _React$useContext4.searchTerm;
   return searchTerm;
 }
 function useActiveSkinToneState() {
   var _React$useContext5 = React.useContext(PickerContext),
-      activeSkinTone = _React$useContext5.activeSkinTone;
-
+    activeSkinTone = _React$useContext5.activeSkinTone;
   return activeSkinTone;
 }
 function useEmojisThatFailedToLoadState() {
   var _React$useContext6 = React.useContext(PickerContext),
-      emojisThatFailedToLoadState = _React$useContext6.emojisThatFailedToLoadState;
-
+    emojisThatFailedToLoadState = _React$useContext6.emojisThatFailedToLoadState;
   return emojisThatFailedToLoadState;
 }
 function useIsPastInitialLoad() {
   var _React$useContext7 = React.useContext(PickerContext),
-      isPastInitialLoad = _React$useContext7.isPastInitialLoad;
-
+    isPastInitialLoad = _React$useContext7.isPastInitialLoad;
   return isPastInitialLoad;
 }
 function useEmojiVariationPickerState() {
   var _React$useContext8 = React.useContext(PickerContext),
-      emojiVariationPickerState = _React$useContext8.emojiVariationPickerState;
-
+    emojiVariationPickerState = _React$useContext8.emojiVariationPickerState;
   return emojiVariationPickerState;
 }
 function useSkinToneFanOpenState() {
   var _React$useContext9 = React.useContext(PickerContext),
-      skinToneFanOpenState = _React$useContext9.skinToneFanOpenState;
-
+    skinToneFanOpenState = _React$useContext9.skinToneFanOpenState;
   return skinToneFanOpenState;
 }
 function useUpdateSuggested() {
   var _React$useContext11 = React.useContext(PickerContext),
-      suggestedUpdateState = _React$useContext11.suggestedUpdateState;
-
+    suggestedUpdateState = _React$useContext11.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
-      setsuggestedUpdate = suggestedUpdateState[1];
+    setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
     setsuggestedUpdate(Date.now());
   }];
@@ -17355,13 +17239,11 @@ function useOnMouseMove() {
     bodyRef == null ? void 0 : bodyRef.addEventListener('mousemove', onMouseMove, {
       passive: true
     });
-
     function onMouseMove() {
       if (isMouseDisallowed()) {
         allowMouseMove();
       }
     }
-
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mousemove', onMouseMove);
     };
@@ -17372,7 +17254,6 @@ function elementCountInRow(parent, element) {
   if (!parent || !element) {
     return 0;
   }
-
   var parentWidth = parent.getBoundingClientRect().width;
   var elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);
@@ -17381,7 +17262,6 @@ function elementIndexInRow(parent, element) {
   if (!parent || !element) {
     return 0;
   }
-
   var elementWidth = element.getBoundingClientRect().width;
   var elementLeft = element.getBoundingClientRect().left;
   var parentLeft = parent.getBoundingClientRect().left;
@@ -17391,7 +17271,6 @@ function rowNumber(parent, element) {
   if (!parent || !element) {
     return 0;
   }
-
   var elementHeight = element.getBoundingClientRect().height;
   var elementTop = element.getBoundingClientRect().top;
   var parentTop = parent.getBoundingClientRect().top;
@@ -17401,14 +17280,12 @@ function hasNextRow(parent, element) {
   if (!parent || !element) {
     return false;
   }
-
   var elementHeight = element.getBoundingClientRect().height;
   var elementTop = element.getBoundingClientRect().top;
   var parentTop = parent.getBoundingClientRect().top;
   var parentHeight = parent.getBoundingClientRect().height;
   return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
 }
-
 function getRowElements(elements, row, elementsInRow) {
   if (row === -1) {
     var lastRow = Math.floor((elements.length - 1) / elementsInRow);
@@ -17416,40 +17293,34 @@ function getRowElements(elements, row, elementsInRow) {
     var lastElementIndex = elements.length - 1;
     return elements.slice(firstElementIndex, lastElementIndex + 1);
   }
-
   return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
 }
-
 function getNextRowElements(allElements, currentRow, elementsInRow) {
   var nextRow = currentRow + 1;
-
   if (nextRow * elementsInRow > allElements.length) {
     return [];
   }
-
   return getRowElements(allElements, nextRow, elementsInRow);
 }
-
 function getElementInRow(elements, row, elementsInRow, indexInRow) {
-  var rowElements = getRowElements(elements, row, elementsInRow); // get element, default to last
-
+  var rowElements = getRowElements(elements, row, elementsInRow);
+  // get element, default to last
   return rowElements[indexInRow] || rowElements[rowElements.length - 1] || null;
 }
 function getElementInNextRow(allElements, currentRow, elementsInRow, index) {
-  var nextRowElements = getNextRowElements(allElements, currentRow, elementsInRow); // return item in index, or last item in row
-
+  var nextRowElements = getNextRowElements(allElements, currentRow, elementsInRow);
+  // return item in index, or last item in row
   return nextRowElements[index] || nextRowElements[nextRowElements.length - 1] || null;
 }
 function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
-  var prevRowElements = getRowElements(allElements, currentRow - 1, elementsInRow); // default to last
-
+  var prevRowElements = getRowElements(allElements, currentRow - 1, elementsInRow);
+  // default to last
   return prevRowElements[index] || prevRowElements[prevRowElements.length - 1] || null;
 }
 function firstVisibleElementInContainer(parent, elements) {
   if (!parent || !elements.length) {
     return null;
   }
-
   var parentTop = parent.getBoundingClientRect().top;
   var parentBottom = parent.getBoundingClientRect().bottom;
   var visibleElements = elements.find(function (element) {
@@ -17467,53 +17338,43 @@ var EmojiButtonSelector = "button" + /*#__PURE__*/asSelectors(ClassNames.emoji);
 var VisibleEmojiSelector = /*#__PURE__*/[EmojiButtonSelector, asSelectors(ClassNames.visible), ":not(" + asSelectors(ClassNames.hidden) + ")"].join('');
 function buttonFromTarget(emojiElement) {
   var _emojiElement$closest;
-
   return (_emojiElement$closest = emojiElement == null ? void 0 : emojiElement.closest(EmojiButtonSelector)) != null ? _emojiElement$closest : null;
 }
 function emojiFromElement(element) {
   var originalUnified = originalUnifiedFromEmojiElement(element);
   var unified = unifiedFromEmojiElement(element);
-
   if (!originalUnified) {
     return [];
   }
-
   var emoji = emojiByUnified(unified != null ? unified : originalUnified);
-
   if (!emoji) {
     return [];
   }
-
   return [emoji, unified];
 }
 function isEmojiElement(element) {
   var _element$parentElemen;
-
   return Boolean((element == null ? void 0 : element.matches(EmojiButtonSelector)) || (element == null ? void 0 : (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.matches(EmojiButtonSelector)));
 }
 function elementHeight(element) {
   var _element$clientHeight;
-
   return (_element$clientHeight = element == null ? void 0 : element.clientHeight) != null ? _element$clientHeight : 0;
 }
 function emojiTrueOffsetTop(element) {
   if (!element) {
     return 0;
   }
-
   var button = buttonFromTarget(element);
-  var category = closestCategory(button); // compensate for the label height
-
+  var category = closestCategory(button);
+  // compensate for the label height
   var labelHeight = categoryLabelHeight(category);
   return elementOffsetTop(button) + elementOffsetTop(category) + labelHeight;
 }
 function categoryLabelHeight(category) {
   var _category$clientHeigh, _categoryWithoutLabel;
-
   if (!category) {
     return 0;
   }
-
   var categoryWithoutLabel = category.querySelector(asSelectors(ClassNames.categoryContent));
   return ((_category$clientHeigh = category == null ? void 0 : category.clientHeight) != null ? _category$clientHeigh : 0) - ((_categoryWithoutLabel = categoryWithoutLabel == null ? void 0 : categoryWithoutLabel.clientHeight) != null ? _categoryWithoutLabel : 0);
 }
@@ -17521,7 +17382,6 @@ function isEmojiBehindLabel(emoji) {
   if (!emoji) {
     return false;
   }
-
   return emojiDistanceFromScrollTop(emoji) < categoryLabelHeight(closestCategory(emoji));
 }
 function queryScrollBody(root) {
@@ -17530,20 +17390,16 @@ function queryScrollBody(root) {
 }
 function emojiDistanceFromScrollTop(emoji) {
   var _closestScrollBody$sc, _closestScrollBody;
-
   if (!emoji) {
     return 0;
   }
-
   return emojiTrueOffsetTop(emoji) - ((_closestScrollBody$sc = (_closestScrollBody = closestScrollBody(emoji)) == null ? void 0 : _closestScrollBody.scrollTop) != null ? _closestScrollBody$sc : 0);
 }
 function closestScrollBody(element) {
   var _element$closest;
-
   if (!element) {
     return null;
   }
-
   return (_element$closest = element.closest(asSelectors(ClassNames.scrollBody))) != null ? _element$closest : null;
 }
 function emojiTruOffsetLeft(element) {
@@ -17551,46 +17407,33 @@ function emojiTruOffsetLeft(element) {
   var category = closestCategory(button);
   return elementOffsetLeft(button) + elementOffsetLeft(category);
 }
-
 function elementOffsetTop(element) {
   var _element$offsetTop;
-
   return (_element$offsetTop = element == null ? void 0 : element.offsetTop) != null ? _element$offsetTop : 0;
 }
-
 function elementOffsetLeft(element) {
   var _element$offsetLeft;
-
   return (_element$offsetLeft = element == null ? void 0 : element.offsetLeft) != null ? _element$offsetLeft : 0;
 }
-
 function unifiedFromEmojiElement(emoji) {
   var _elementDataSetKey;
-
   return (_elementDataSetKey = elementDataSetKey(buttonFromTarget(emoji), 'unified')) != null ? _elementDataSetKey : null;
 }
 function originalUnifiedFromEmojiElement(emoji) {
   var unified = unifiedFromEmojiElement(emoji);
-
   if (unified) {
     return unifiedWithoutSkinTone(unified);
   }
-
   return null;
 }
-
 function elementDataSetKey(element, key) {
   var _elementDataSet$key;
-
   return (_elementDataSet$key = elementDataSet(element)[key]) != null ? _elementDataSet$key : null;
 }
-
 function elementDataSet(element) {
   var _element$dataset;
-
   return (_element$dataset = element == null ? void 0 : element.dataset) != null ? _element$dataset : {};
 }
-
 function isVisibleEmoji(element) {
   return element.classList.contains(ClassNames.visible);
 }
@@ -17602,110 +17445,86 @@ function allVisibleEmojis(parent) {
   if (!parent) {
     return [];
   }
-
   return Array.from(parent.querySelectorAll(VisibleEmojiSelector));
 }
 function lastVisibleEmoji(element) {
   if (!element) return null;
   var allEmojis = allVisibleEmojis(element);
-
   var _allEmojis$slice = allEmojis.slice(-1),
-      last = _allEmojis$slice[0];
-
+    last = _allEmojis$slice[0];
   if (!last) {
     return null;
   }
-
   if (!isVisibleEmoji(last)) {
     return prevVisibleEmoji(last);
   }
-
   return last;
 }
 function nextVisibleEmoji(element) {
   var next = element.nextElementSibling;
-
   if (!next) {
     return firstVisibleEmoji(nextCategory(element));
   }
-
   if (!isVisibleEmoji(next)) {
     return nextVisibleEmoji(next);
   }
-
   return next;
 }
 function prevVisibleEmoji(element) {
   var prev = element.previousElementSibling;
-
   if (!prev) {
     return lastVisibleEmoji(prevCategory(element));
   }
-
   if (!isVisibleEmoji(prev)) {
     return prevVisibleEmoji(prev);
   }
-
   return prev;
 }
 function firstVisibleEmoji(parent) {
   if (!parent) {
     return null;
   }
-
   var allEmojis = allVisibleEmojis(parent);
   return firstVisibleElementInContainer(parent, allEmojis);
 }
 function prevCategory(element) {
   var category = closestCategory(element);
-
   if (!category) {
     return null;
   }
-
   var prev = category.previousElementSibling;
-
   if (!prev) {
     return null;
   }
-
   if (isHidden(prev)) {
     return prevCategory(prev);
   }
-
   return prev;
 }
 function nextCategory(element) {
   var category = closestCategory(element);
-
   if (!category) {
     return null;
   }
-
   var next = category.nextElementSibling;
-
   if (!next) {
     return null;
   }
-
   if (isHidden(next)) {
     return nextCategory(next);
   }
-
   return next;
 }
 function closestCategory(element) {
   if (!element) {
     return null;
   }
-
   return element.closest(asSelectors(ClassNames.category));
 }
 function closestCategoryContent(element) {
   if (!element) {
     return null;
   }
-
   return element.closest(asSelectors(ClassNames.categoryContent));
 }
 
@@ -17719,19 +17538,15 @@ var SUGGESTED_LS_KEY = 'epr_suggested';
 function getSuggested(mode) {
   try {
     var _window, _window$localStorage$, _window2;
-
     if (!((_window = window) != null && _window.localStorage)) {
       return [];
     }
-
     var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
-
     if (mode === exports.SuggestionMode.FREQUENT) {
       return recent.sort(function (a, b) {
         return b.count - a.count;
       });
     }
-
     return recent;
   } catch (_unused) {
     return [];
@@ -17746,7 +17561,6 @@ function setSuggested(emoji, skinTone) {
     return u === unified;
   });
   var nextList;
-
   if (existing) {
     nextList = [existing].concat(recent.filter(function (i) {
       return i !== existing;
@@ -17759,15 +17573,14 @@ function setSuggested(emoji, skinTone) {
     };
     nextList = [existing].concat(recent);
   }
-
   existing.count++;
   nextList.length = Math.min(nextList.length, 14);
-
   try {
     var _window3;
-
-    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList)); // Prevents the change from being seen immediately.
-  } catch (_unused2) {// ignore
+    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
+    // Prevents the change from being seen immediately.
+  } catch (_unused2) {
+    // ignore
   }
 }
 
@@ -17780,18 +17593,15 @@ function isCustomEmoji(emoji) {
 
 function useCloseAllOpenToggles() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      variationPicker = _useEmojiVariationPic[0],
-      setVariationPicker = _useEmojiVariationPic[1];
-
+    variationPicker = _useEmojiVariationPic[0],
+    setVariationPicker = _useEmojiVariationPic[1];
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
-      skinToneFanOpen = _useSkinToneFanOpenSt[0],
-      setSkinToneFanOpen = _useSkinToneFanOpenSt[1];
-
+    skinToneFanOpen = _useSkinToneFanOpenSt[0],
+    setSkinToneFanOpen = _useSkinToneFanOpenSt[1];
   var closeAllOpenToggles = React.useCallback(function () {
     if (variationPicker) {
       setVariationPicker(null);
     }
-
     if (skinToneFanOpen) {
       setSkinToneFanOpen(false);
     }
@@ -17800,11 +17610,9 @@ function useCloseAllOpenToggles() {
 }
 function useHasOpenToggles() {
   var _useEmojiVariationPic2 = useEmojiVariationPickerState(),
-      variationPicker = _useEmojiVariationPic2[0];
-
+    variationPicker = _useEmojiVariationPic2[0];
   var _useSkinToneFanOpenSt2 = useSkinToneFanOpenState(),
-      skinToneFanOpen = _useSkinToneFanOpenSt2[0];
-
+    skinToneFanOpen = _useSkinToneFanOpenSt2[0];
   return function hasOpenToggles() {
     return !!variationPicker || skinToneFanOpen;
   };
@@ -17812,14 +17620,11 @@ function useHasOpenToggles() {
 
 function useSetVariationPicker() {
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
-
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      setEmojiVariationPicker = _useEmojiVariationPic[1];
-
+    setEmojiVariationPicker = _useEmojiVariationPic[1];
   return function setVariationPicker(element) {
     var _emojiFromElement = emojiFromElement(element),
-        emoji = _emojiFromElement[0];
-
+      emoji = _emojiFromElement[0];
     if (emoji) {
       setAnchoredEmojiRef(element);
       setEmojiVariationPicker(emoji);
@@ -17831,37 +17636,27 @@ function useMouseDownHandlers(BodyRef) {
   var mouseDownTimerRef = React.useRef();
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
-
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      setEmojiVariationPicker = _useEmojiVariationPic[1];
-
+    setEmojiVariationPicker = _useEmojiVariationPic[1];
   var closeAllOpenToggles = useCloseAllOpenToggles();
-
   var _useActiveSkinToneSta = useActiveSkinToneState(),
-      activeSkinTone = _useActiveSkinToneSta[0];
-
+    activeSkinTone = _useActiveSkinToneSta[0];
   var onEmojiClick = useOnEmojiClickConfig();
-
   var _useUpdateSuggested = useUpdateSuggested(),
-      updateSuggested = _useUpdateSuggested[1];
-
+    updateSuggested = _useUpdateSuggested[1];
   var getEmojiUrl = useGetEmojiUrlConfig();
   var activeEmojiStyle = useEmojiStyleConfig();
   var onClick = React.useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
     }
-
     closeAllOpenToggles();
-
     var _emojiFromEvent = emojiFromEvent(event),
-        emoji = _emojiFromEvent[0],
-        unified = _emojiFromEvent[1];
-
+      emoji = _emojiFromEvent[0],
+      unified = _emojiFromEvent[1];
     if (!emoji || !unified) {
       return;
     }
-
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setSuggested(emoji, skinToneToUse);
@@ -17869,18 +17664,14 @@ function useMouseDownHandlers(BodyRef) {
   }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
     var _window;
-
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
     }
-
     var _emojiFromEvent2 = emojiFromEvent(event),
-        emoji = _emojiFromEvent2[0];
-
+      emoji = _emojiFromEvent2[0];
     if (!emoji || !emojiHasVariations(emoji)) {
       return;
     }
-
     mouseDownTimerRef.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
@@ -17908,7 +17699,6 @@ function useMouseDownHandlers(BodyRef) {
     if (!BodyRef.current) {
       return;
     }
-
     var bodyRef = BodyRef.current;
     bodyRef.addEventListener('click', onClick, {
       passive: true
@@ -17926,23 +17716,17 @@ function useMouseDownHandlers(BodyRef) {
     };
   }, [BodyRef, onClick, onMouseDown, onMouseUp]);
 }
-
 function emojiFromEvent(event) {
   var target = event == null ? void 0 : event.target;
-
   if (!isEmojiElement(target)) {
     return [];
   }
-
   return emojiFromElement(target);
 }
-
 function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl) {
   var names = emojiNames(emoji);
-
   if (isCustomEmoji(emoji)) {
     var _unified = emojiUnified(emoji);
-
     return {
       activeSkinTone: activeSkinTone,
       emoji: _unified,
@@ -17956,7 +17740,6 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
       unifiedWithoutSkinTone: _unified
     };
   }
-
   var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
@@ -17965,7 +17748,6 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
       if (emojiStyle === void 0) {
         emojiStyle = activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE;
       }
-
       return getEmojiUrl(unified, emojiStyle);
     },
     imageUrl: getEmojiUrl(unified, activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE),
@@ -17980,19 +17762,15 @@ function useOnScroll(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
   React.useEffect(function () {
     var bodyRef = BodyRef.current;
-
     if (!bodyRef) {
       return;
     }
-
     bodyRef.addEventListener('scroll', onScroll, {
       passive: true
     });
-
     function onScroll() {
       closeAllOpenToggles();
     }
-
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('scroll', onScroll);
     };
@@ -18003,24 +17781,19 @@ function scrollTo(root, top) {
   if (top === void 0) {
     top = 0;
   }
-
   var $eprBody = queryScrollBody(root);
-
   if (!$eprBody) {
     return;
   }
-
   requestAnimationFrame(function () {
     $eprBody.scrollTop = top + 1;
   });
 }
 function scrollBy(root, by) {
   var $eprBody = queryScrollBody(root);
-
   if (!$eprBody) {
     return;
   }
-
   requestAnimationFrame(function () {
     $eprBody.scrollTop = $eprBody.scrollTop + by;
   });
@@ -18039,11 +17812,9 @@ function scrollEmojiAboveLabel(emoji) {
   if (!emoji || !isEmojiBehindLabel(emoji)) {
     return;
   }
-
   if (emoji.closest(asSelectors(ClassNames.variationPicker))) {
     return;
   }
-
   var scrollBody = closestScrollBody(emoji);
   var by = emojiDistanceFromScrollTop(emoji);
   scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
@@ -18061,7 +17832,6 @@ function useFocusSkinTonePicker() {
     if (!SkinTonePickerRef.current) {
       return;
     }
-
     focusFirstElementChild(SkinTonePickerRef.current);
   }, [SkinTonePickerRef]);
 }
@@ -18071,7 +17841,6 @@ function useFocusCategoryNavigation() {
     if (!CategoryNavigationRef.current) {
       return;
     }
-
     focusFirstElementChild(CategoryNavigationRef.current);
   }, [CategoryNavigationRef]);
 }
@@ -18082,11 +17851,9 @@ function useSetFilterRef() {
     if (typeof setter === 'function') {
       return setFilter(setter(filterRef.current));
     }
-
     filterRef.current = setter;
   };
 }
-
 function useClearSearch() {
   var applySearch = useApplySearch();
   var SearchInputRef = useSearchInputRef();
@@ -18095,7 +17862,6 @@ function useClearSearch() {
     if (SearchInputRef.current) {
       SearchInputRef.current.value = '';
     }
-
     applySearch('');
     focusSearchInput();
   };
@@ -18117,10 +17883,8 @@ function useFilter() {
   var filterRef = useFilterRef();
   var setFilterRef = useSetFilterRef();
   var applySearch = useApplySearch();
-
   var _useSearchTermState = useSearchTermState(),
-      searchTerm = _useSearchTermState[0];
-
+    searchTerm = _useSearchTermState[0];
   var statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
   return {
     onChange: onChange,
@@ -18128,36 +17892,28 @@ function useFilter() {
     SearchInputRef: SearchInputRef,
     statusSearchResults: statusSearchResults
   };
-
   function onChange(inputValue) {
     var filter = filterRef.current;
     var nextValue = inputValue.toLowerCase();
-
     if (filter != null && filter[nextValue] || nextValue.length <= 1) {
       return applySearch(nextValue);
     }
-
     var longestMatch = findLongestMatch(nextValue, filter);
-
     if (!longestMatch) {
       // Can we even get here?
       // If so, we need to search among all emojis
       return applySearch(nextValue);
     }
-
     setFilterRef(function (current) {
       var _Object$assign;
-
       return Object.assign(current, (_Object$assign = {}, _Object$assign[nextValue] = filterEmojiObjectByKeyword(longestMatch, nextValue), _Object$assign));
     });
     applySearch(nextValue);
   }
 }
-
 function useApplySearch() {
   var _useSearchTermState2 = useSearchTermState(),
-      setSearchTerm = _useSearchTermState2[1];
-
+    setSearchTerm = _useSearchTermState2[1];
   var PickerMainRef = usePickerMainRef();
   return function applySearch(searchTerm) {
     requestAnimationFrame(function () {
@@ -18167,92 +17923,71 @@ function useApplySearch() {
     });
   };
 }
-
 function filterEmojiObjectByKeyword(emojis, keyword) {
   var filtered = {};
-
   for (var unified in emojis) {
     var emoji = emojis[unified];
-
     if (hasMatch(emoji, keyword)) {
       filtered[unified] = emoji;
     }
   }
-
   return filtered;
 }
-
 function hasMatch(emoji, keyword) {
   return emojiNames(emoji).some(function (name) {
     return name.includes(keyword);
   });
 }
-
 function useIsEmojiFiltered() {
   var _useFilterRef = useFilterRef(),
-      filter = _useFilterRef.current;
-
+    filter = _useFilterRef.current;
   var _useSearchTermState3 = useSearchTermState(),
-      searchTerm = _useSearchTermState3[0];
-
+    searchTerm = _useSearchTermState3[0];
   return function (unified) {
     return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
   };
 }
-
 function isEmojiFilteredBySearchTerm(unified, filter, searchTerm) {
   var _filter$searchTerm;
-
   if (!filter || !searchTerm) {
     return false;
   }
-
   return !((_filter$searchTerm = filter[searchTerm]) != null && _filter$searchTerm[unified]);
 }
-
 function findLongestMatch(keyword, dict) {
   if (!dict) {
     return null;
   }
-
   if (dict[keyword]) {
     return dict[keyword];
   }
-
   var longestMatchingKey = Object.keys(dict).sort(function (a, b) {
     return b.length - a.length;
   }).find(function (key) {
     return keyword.includes(key);
   });
-
   if (longestMatchingKey) {
     return dict[longestMatchingKey];
   }
-
   return null;
 }
-
 function getNormalizedSearchTerm(str) {
   if (!str || typeof str !== 'string') {
     return '';
   }
-
   return str.trim().toLowerCase();
 }
-
 function getStatusSearchResults(filterState, searchTerm) {
   var _Object$entries;
-
   if (!(filterState != null && filterState[searchTerm])) return '';
-  var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0; // eslint-disable-next-line react-hooks/rules-of-hooks
-
+  var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   return useSearchResultsConfig(searchResultsCount);
 }
 
 function useIsEmojiHidden() {
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
-      emojisThatFailedToLoad = _useEmojisThatFailedT[0];
-
+    emojisThatFailedToLoad = _useEmojisThatFailedT[0];
   var isEmojiFiltered = useIsEmojiFiltered();
   return function (emoji) {
     var unified = emojiUnified(emoji);
@@ -18270,21 +18005,29 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: flairup.cx('epr-btn', props.className)
+    className: flairup.cx(styles.button, props.className)
   }), props.children);
 }
+var styles = /*#__PURE__*/stylesheet.create({
+  button: {
+    '.': 'epr-btn',
+    cursor: 'pointer',
+    border: '0',
+    background: 'none',
+    outline: 'none'
+  }
+});
 
 function ClickableEmojiButton(_ref) {
   var _cx;
-
   var emojiNames = _ref.emojiNames,
-      unified = _ref.unified,
-      hidden = _ref.hidden,
-      hiddenOnSearch = _ref.hiddenOnSearch,
-      _ref$showVariations = _ref.showVariations,
-      showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
-      hasVariations = _ref.hasVariations,
-      children = _ref.children;
+    unified = _ref.unified,
+    hidden = _ref.hidden,
+    hiddenOnSearch = _ref.hiddenOnSearch,
+    _ref$showVariations = _ref.showVariations,
+    showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
+    hasVariations = _ref.hasVariations,
+    children = _ref.children;
   return React.createElement(Button, {
     className: flairup.cx(ClassNames.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _cx)),
     "data-unified": unified,
@@ -18295,11 +18038,11 @@ function ClickableEmojiButton(_ref) {
 
 function EmojiImg(_ref) {
   var emojiName = _ref.emojiName,
-      style = _ref.style,
-      _ref$lazyLoad = _ref.lazyLoad,
-      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
-      imgUrl = _ref.imgUrl,
-      onError = _ref.onError;
+    style = _ref.style,
+    _ref$lazyLoad = _ref.lazyLoad,
+    lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+    imgUrl = _ref.imgUrl,
+    onError = _ref.onError;
   return React.createElement("img", {
     src: imgUrl,
     alt: emojiName,
@@ -18312,7 +18055,7 @@ function EmojiImg(_ref) {
 
 function NativeEmoji(_ref) {
   var unified = _ref.unified,
-      style = _ref.style;
+    style = _ref.style;
   return React.createElement("span", {
     className: flairup.cx(ClassNames.external, 'epr-emoji-native'),
     "data-unified": unified,
@@ -18322,28 +18065,22 @@ function NativeEmoji(_ref) {
 
 function ViewOnlyEmoji(_ref) {
   var emoji = _ref.emoji,
-      unified = _ref.unified,
-      emojiStyle = _ref.emojiStyle,
-      size = _ref.size,
-      lazyLoad = _ref.lazyLoad,
-      _ref$getEmojiUrl = _ref.getEmojiUrl,
-      getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl;
-
+    unified = _ref.unified,
+    emojiStyle = _ref.emojiStyle,
+    size = _ref.size,
+    lazyLoad = _ref.lazyLoad,
+    _ref$getEmojiUrl = _ref.getEmojiUrl,
+    getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl;
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
-      setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
-
+    setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
   var style = {};
-
   if (size) {
     style.width = style.height = style.fontSize = size + "px";
   }
-
   var emojiToRender = emoji ? emoji : emojiByUnified(unified);
-
   if (!emojiToRender) {
     return null;
   }
-
   if (isCustomEmoji(emojiToRender)) {
     return React.createElement(EmojiImg, {
       style: style,
@@ -18354,7 +18091,6 @@ function ViewOnlyEmoji(_ref) {
       onError: onError
     });
   }
-
   return React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
     unified: unified,
     style: style
@@ -18366,7 +18102,6 @@ function ViewOnlyEmoji(_ref) {
     imgUrl: getEmojiUrl(unified, emojiStyle),
     onError: onError
   }));
-
   function onError() {
     setEmojisThatFailedToLoad(function (prev) {
       return new Set(prev).add(unified);
@@ -18376,15 +18111,15 @@ function ViewOnlyEmoji(_ref) {
 
 function ClickableEmoji(_ref) {
   var emoji = _ref.emoji,
-      unified = _ref.unified,
-      hidden = _ref.hidden,
-      hiddenOnSearch = _ref.hiddenOnSearch,
-      emojiStyle = _ref.emojiStyle,
-      _ref$showVariations = _ref.showVariations,
-      showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
-      size = _ref.size,
-      lazyLoad = _ref.lazyLoad,
-      getEmojiUrl = _ref.getEmojiUrl;
+    unified = _ref.unified,
+    hidden = _ref.hidden,
+    hiddenOnSearch = _ref.hiddenOnSearch,
+    emojiStyle = _ref.emojiStyle,
+    _ref$showVariations = _ref.showVariations,
+    showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
+    size = _ref.size,
+    lazyLoad = _ref.lazyLoad,
+    getEmojiUrl = _ref.getEmojiUrl;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -18405,22 +18140,22 @@ function ClickableEmoji(_ref) {
 
 function EmojiCategory(_ref) {
   var categoryConfig = _ref.categoryConfig,
-      children = _ref.children,
-      hidden = _ref.hidden,
-      hiddenOnSearch = _ref.hiddenOnSearch;
+    children = _ref.children,
+    hidden = _ref.hidden,
+    hiddenOnSearch = _ref.hiddenOnSearch;
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
-    className: flairup.cx(styles.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
+    className: flairup.cx(styles$1.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
-    className: flairup.cx(styles.label)
+    className: flairup.cx(styles$1.label)
   }, categoryName), React.createElement("div", {
-    className: flairup.cx(styles.categoryContent)
+    className: flairup.cx(styles$1.categoryContent)
   }, children));
 }
-var styles = /*#__PURE__*/stylesheet.create({
+var styles$1 = /*#__PURE__*/stylesheet.create({
   category: {
     '.': ClassNames.category,
     ':not(:has(.epr-visible))': {
@@ -18459,17 +18194,15 @@ var styles = /*#__PURE__*/stylesheet.create({
 
 function Suggested(_ref) {
   var categoryConfig = _ref.categoryConfig;
-
   var _useUpdateSuggested = useUpdateSuggested(),
-      suggestedUpdated = _useUpdateSuggested[0];
-
+    suggestedUpdated = _useUpdateSuggested[0];
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   var getEmojiUrl = useGetEmojiUrlConfig();
   var suggested = React.useMemo(function () {
     var _getSuggested;
-
     return (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [suggestedUpdated, suggestedEmojisModeConfig]);
   var emojiStyle = useEmojiStyleConfig();
   return React.createElement(EmojiCategory, {
@@ -18478,11 +18211,9 @@ function Suggested(_ref) {
     hidden: suggested.length === 0
   }, suggested.map(function (suggestedItem) {
     var emoji = emojiByUnified(suggestedItem.original);
-
     if (!emoji) {
       return null;
     }
-
     return React.createElement(ClickableEmoji, {
       showVariations: false,
       unified: suggestedItem.unified,
@@ -18498,17 +18229,15 @@ function EmojiList() {
   var categories = useCategoriesConfig();
   var renderdCategoriesCountRef = React.useRef(0);
   return React.createElement("ul", {
-    className: flairup.cx(styles$1.emojiList)
+    className: flairup.cx(styles$2.emojiList)
   }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
-
     if (category === exports.Categories.SUGGESTED) {
       return React.createElement(Suggested, {
         key: category,
         categoryConfig: categoryConfig
       });
     }
-
     return React.createElement(RenderCategory, {
       key: category,
       category: category,
@@ -18517,49 +18246,39 @@ function EmojiList() {
     });
   }));
 }
-
 function RenderCategory(_ref) {
   var category = _ref.category,
-      categoryConfig = _ref.categoryConfig,
-      renderdCategoriesCountRef = _ref.renderdCategoriesCountRef;
+    categoryConfig = _ref.categoryConfig,
+    renderdCategoriesCountRef = _ref.renderdCategoriesCountRef;
   var isEmojiHidden = useIsEmojiHidden();
   var lazyLoadEmojis = useLazyLoadEmojisConfig();
   var emojiStyle = useEmojiStyleConfig();
   var isPastInitialLoad = useIsPastInitialLoad();
-
   var _useActiveSkinToneSta = useActiveSkinToneState(),
-      activeSkinTone = _useActiveSkinToneSta[0];
-
+    activeSkinTone = _useActiveSkinToneSta[0];
   var isEmojiDisallowed = useIsEmojiDisallowed();
   var getEmojiUrl = useGetEmojiUrlConfig();
-  var showVariations = !useSkinTonesDisabledConfig(); // Small trick to defer the rendering of all emoji categories until the first category is visible
+  var showVariations = !useSkinTonesDisabledConfig();
+  // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
-
   var emojisToPush = !isPastInitialLoad && renderdCategoriesCountRef.current > 0 ? [] : emojisByCategory(category);
-
   if (emojisToPush.length > 0) {
     renderdCategoriesCountRef.current++;
   }
-
   var hiddenCounter = 0;
   var emojis = emojisToPush.map(function (emoji) {
     var unified = emojiUnified(emoji, activeSkinTone);
-
     var _isEmojiHidden = isEmojiHidden(emoji),
-        failedToLoad = _isEmojiHidden.failedToLoad,
-        filteredOut = _isEmojiHidden.filteredOut,
-        hidden = _isEmojiHidden.hidden;
-
+      failedToLoad = _isEmojiHidden.failedToLoad,
+      filteredOut = _isEmojiHidden.filteredOut,
+      hidden = _isEmojiHidden.hidden;
     var isDisallowed = isEmojiDisallowed(emoji);
-
     if (hidden || isDisallowed) {
       hiddenCounter++;
     }
-
     if (isDisallowed) {
       return null;
     }
-
     return React.createElement(ClickableEmoji, {
       showVariations: showVariations,
       key: unified,
@@ -18579,8 +18298,7 @@ function RenderCategory(_ref) {
     hidden: hiddenCounter === emojis.length
   }, emojis);
 }
-
-var styles$1 = /*#__PURE__*/stylesheet.create({
+var styles$2 = /*#__PURE__*/stylesheet.create({
   emojiList: {
     '.': ClassNames.emojiList,
     listStyle: 'none',
@@ -18606,13 +18324,10 @@ function focusNextVisibleEmoji(element) {
   if (!element) {
     return;
   }
-
   var next = nextVisibleEmoji(element);
-
   if (!next) {
     return focusFirstVisibleEmoji(nextCategory(element));
   }
-
   focusElement(next);
   scrollEmojiAboveLabel(next);
 }
@@ -18620,13 +18335,10 @@ function focusPrevVisibleEmoji(element) {
   if (!element) {
     return;
   }
-
   var prev = prevVisibleEmoji(element);
-
   if (!prev) {
     return focusLastVisibleEmoji(prevCategory(element));
   }
-
   focusElement(prev);
   scrollEmojiAboveLabel(prev);
 }
@@ -18634,13 +18346,10 @@ function focusVisibleEmojiOneRowUp(element, exitUp) {
   if (!element) {
     return;
   }
-
   var prev = visibleEmojiOneRowUp(element);
-
   if (!prev) {
     return exitUp();
   }
-
   focusElement(prev);
   scrollEmojiAboveLabel(prev);
 }
@@ -18648,81 +18357,63 @@ function focusVisibleEmojiOneRowDown(element) {
   if (!element) {
     return;
   }
-
   var next = visibleEmojiOneRowDown(element);
   return focusElement(next);
 }
-
 function visibleEmojiOneRowUp(element) {
   if (!element) {
     return null;
   }
-
   var categoryContent = closestCategoryContent(element);
   var category = closestCategory(categoryContent);
   var indexInRow = elementIndexInRow(categoryContent, element);
   var row = rowNumber(categoryContent, element);
   var countInRow = elementCountInRow(categoryContent, element);
-
   if (row === 0) {
     var prevVisibleCategory = prevCategory(category);
-
     if (!prevVisibleCategory) {
       return null;
     }
-
-    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
+    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1,
+    // last row
     countInRow, indexInRow);
   }
-
   return getElementInPrevRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
 }
-
 function visibleEmojiOneRowDown(element) {
   if (!element) {
     return null;
   }
-
   var categoryContent = closestCategoryContent(element);
   var category = closestCategory(categoryContent);
   var indexInRow = elementIndexInRow(categoryContent, element);
   var row = rowNumber(categoryContent, element);
   var countInRow = elementCountInRow(categoryContent, element);
-
   if (!hasNextRow(categoryContent, element)) {
     var nextVisibleCategory = nextCategory(category);
-
     if (!nextVisibleCategory) {
       return null;
     }
-
     return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
   }
-
   var itemInNextRow = getElementInNextRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
   return itemInNextRow;
 }
 
 var Direction;
-
 (function (Direction) {
   Direction[Direction["Up"] = 0] = "Up";
   Direction[Direction["Down"] = 1] = "Down";
 })(Direction || (Direction = {}));
-
 function EmojiVariationPicker() {
   var AnchoredEmojiRef = useAnchoredEmojiRef();
   var VariationPickerRef = useVariationPickerRef();
-
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      emoji = _useEmojiVariationPic[0];
-
+    emoji = _useEmojiVariationPic[0];
   var emojiStyle = useEmojiStyleConfig();
-
   var _useVariationPickerTo = useVariationPickerTop(VariationPickerRef),
-      getTop = _useVariationPickerTo.getTop,
-      getMenuDirection = _useVariationPickerTo.getMenuDirection;
-
+    getTop = _useVariationPickerTo.getTop,
+    getMenuDirection = _useVariationPickerTo.getMenuDirection;
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   var getPointerStyle = usePointerStyle(VariationPickerRef);
   var getEmojiUrl = useGetEmojiUrlConfig();
@@ -18732,18 +18423,15 @@ function EmojiVariationPicker() {
     if (!visible) {
       return;
     }
-
     focusFirstVisibleEmoji(VariationPickerRef.current);
   }, [VariationPickerRef, visible, AnchoredEmojiRef]);
   var top, pointerStyle;
-
   if (!visible && AnchoredEmojiRef.current) {
     setAnchoredEmojiRef(null);
   } else {
     top = getTop();
     pointerStyle = getPointerStyle();
   }
-
   return React.createElement("div", {
     ref: VariationPickerRef,
     className: flairup.cx(ClassNames.variationPicker, {
@@ -18767,32 +18455,25 @@ function EmojiVariationPicker() {
     style: pointerStyle
   }));
 }
-
 function usePointerStyle(VariationPickerRef) {
   var AnchoredEmojiRef = useAnchoredEmojiRef();
   return function getPointerStyle() {
     var style = {};
-
     if (!VariationPickerRef.current) {
       return style;
     }
-
     if (AnchoredEmojiRef.current) {
       var button = buttonFromTarget(AnchoredEmojiRef.current);
       var offsetLeft = emojiTruOffsetLeft(button);
-
       if (!button) {
         return style;
-      } // half of the button
-
-
+      }
+      // half of the button
       style.left = offsetLeft + (button == null ? void 0 : button.clientWidth) / 2;
     }
-
     return style;
   };
 }
-
 function useVariationPickerTop(VariationPickerRef) {
   var AnchoredEmojiRef = useAnchoredEmojiRef();
   var BodyRef = useBodyRef();
@@ -18801,36 +18482,28 @@ function useVariationPickerTop(VariationPickerRef) {
     getMenuDirection: getMenuDirection,
     getTop: getTop
   };
-
   function getMenuDirection() {
     return direction;
   }
-
   function getTop() {
     direction = Direction.Up;
     var emojiOffsetTop = 0;
-
     if (!VariationPickerRef.current) {
       return 0;
     }
-
     var height = elementHeight(VariationPickerRef.current);
-
     if (AnchoredEmojiRef.current) {
       var _bodyRef$scrollTop;
-
       var bodyRef = BodyRef.current;
       var button = buttonFromTarget(AnchoredEmojiRef.current);
       var buttonHeight = elementHeight(button);
       emojiOffsetTop = emojiTrueOffsetTop(button);
       var scrollTop = (_bodyRef$scrollTop = bodyRef == null ? void 0 : bodyRef.scrollTop) != null ? _bodyRef$scrollTop : 0;
-
       if (scrollTop > emojiOffsetTop - height) {
         direction = Direction.Down;
         emojiOffsetTop += buttonHeight + height;
       }
     }
-
     return emojiOffsetTop - height;
   }
 }
@@ -18841,11 +18514,11 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return React.createElement("div", {
-    className: flairup.cx(styles$2.body),
+    className: flairup.cx(styles$3.body),
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
-var styles$2 = /*#__PURE__*/stylesheet.create({
+var styles$3 = /*#__PURE__*/stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
     flex: '1',
@@ -18863,7 +18536,6 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
     if (!allow) {
       return;
     }
-
     var bodyRef = BodyRef.current;
     bodyRef == null ? void 0 : bodyRef.addEventListener('keydown', onEscape, {
       passive: true
@@ -18874,57 +18546,44 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       passive: true
     });
     bodyRef == null ? void 0 : bodyRef.addEventListener('blur', onLeave, true);
-
     function onEnter(e) {
       var button = buttonFromTarget(e.target);
-
       if (!button) {
         return onLeave();
       }
-
       var unified = unifiedFromEmojiElement(button);
       var originalUnified = originalUnifiedFromEmojiElement(button);
-
       if (!unified || !originalUnified) {
         return onLeave();
       }
-
       setPreviewEmoji({
         unified: unified,
         originalUnified: originalUnified
       });
     }
-
     function onLeave(e) {
       if (e) {
         var relatedTarget = e.relatedTarget;
-
         if (!buttonFromTarget(relatedTarget)) {
           return setPreviewEmoji(null);
         }
       }
-
       setPreviewEmoji(null);
     }
-
     function onEscape(e) {
       if (e.key === 'Escape') {
         setPreviewEmoji(null);
       }
     }
-
     function onMouseOver(e) {
       if (isMouseDisallowed()) {
         return;
       }
-
       var button = buttonFromTarget(e.target);
-
       if (button) {
         focusElement(button);
       }
     }
-
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseout', onLeave);
@@ -18946,25 +18605,23 @@ function useIsSkinToneInPreview() {
 
 var _stylesheet$create;
 var FlexDirection;
-
 (function (FlexDirection) {
   FlexDirection["ROW"] = "FlexRow";
   FlexDirection["COLUMN"] = "FlexColumn";
 })(FlexDirection || (FlexDirection = {}));
-
 function Flex(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
+    className = _ref.className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return React.createElement("div", {
     style: _extends({}, style),
-    className: flairup.cx(styles$3.flex, className, styles$3[direction])
+    className: flairup.cx(styles$4.flex, className, styles$4[direction])
   }, children);
 }
-var styles$3 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
+var styles$4 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
   flex: {
     display: 'flex'
   }
@@ -18976,8 +18633,8 @@ var styles$3 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
 
 function Space(_ref) {
   var className = _ref.className,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style;
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
   return React.createElement("div", {
     style: _extends({
       flex: 1
@@ -18988,8 +18645,8 @@ function Space(_ref) {
 
 function Absolute(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style;
+    className = _ref.className,
+    style = _ref.style;
   return React.createElement("div", {
     style: _extends({}, style, {
       position: 'absolute'
@@ -19000,8 +18657,8 @@ function Absolute(_ref) {
 
 function Relative(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style;
+    className = _ref.className,
+    style = _ref.style;
   return React.createElement("div", {
     style: _extends({}, style, {
       position: 'relative'
@@ -19027,27 +18684,21 @@ function SkinTonePickerMenu() {
 }
 function SkinTonePicker(_ref) {
   var _cx;
-
   var _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? SkinTonePickerDirection.HORIZONTAL : _ref$direction;
+    direction = _ref$direction === void 0 ? SkinTonePickerDirection.HORIZONTAL : _ref$direction;
   var SkinTonePickerRef = useSkinTonePickerRef();
   var isDisabled = useSkinTonesDisabledConfig();
-
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
-      isOpen = _useSkinToneFanOpenSt[0],
-      setIsOpen = _useSkinToneFanOpenSt[1];
-
+    isOpen = _useSkinToneFanOpenSt[0],
+    setIsOpen = _useSkinToneFanOpenSt[1];
   var _useActiveSkinToneSta = useActiveSkinToneState(),
-      activeSkinTone = _useActiveSkinToneSta[0],
-      setActiveSkinTone = _useActiveSkinToneSta[1];
-
+    activeSkinTone = _useActiveSkinToneSta[0],
+    setActiveSkinTone = _useActiveSkinToneSta[1];
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var focusSearchInput = useFocusSearchInput();
-
   if (isDisabled) {
     return null;
   }
-
   var fullWidth = ITEM_SIZE * skinToneVariations.length + "px";
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
@@ -19064,7 +18715,6 @@ function SkinTonePicker(_ref) {
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var _cx2;
-
     var active = skinToneVariation === activeSkinTone;
     return React.createElement(Button, {
       style: {
@@ -19077,7 +18727,6 @@ function SkinTonePicker(_ref) {
         } else {
           setIsOpen(true);
         }
-
         closeAllOpenToggles();
       },
       key: skinToneVariation,
@@ -19089,7 +18738,6 @@ function SkinTonePicker(_ref) {
   })));
 }
 var SkinTonePickerDirection;
-
 (function (SkinTonePickerDirection) {
   SkinTonePickerDirection["VERTICAL"] = "epr-vertical";
   SkinTonePickerDirection["HORIZONTAL"] = "epr-horizontal";
@@ -19098,42 +18746,32 @@ var SkinTonePickerDirection;
 function Preview() {
   var previewConfig = usePreviewConfig();
   var isSkinToneInPreview = useIsSkinToneInPreview();
-
   if (!previewConfig.showPreview) {
     return null;
   }
-
   return React.createElement(Flex, {
-    className: flairup.cx(styles$4.preview)
+    className: flairup.cx(styles$5.preview)
   }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
   var _previewEmoji$unified;
-
   var previewConfig = usePreviewConfig();
-
   var _useState = React.useState(null),
-      previewEmoji = _useState[0],
-      setPreviewEmoji = _useState[1];
-
+    previewEmoji = _useState[0],
+    setPreviewEmoji = _useState[1];
   var emojiStyle = useEmojiStyleConfig();
-
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      variationPickerEmoji = _useEmojiVariationPic[0];
-
+    variationPickerEmoji = _useEmojiVariationPic[0];
   var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
   var emoji = emojiByUnified((_previewEmoji$unified = previewEmoji == null ? void 0 : previewEmoji.unified) != null ? _previewEmoji$unified : previewEmoji == null ? void 0 : previewEmoji.originalUnified);
   var show = emoji != null && previewEmoji != null;
   return React.createElement(PreviewContent, null);
-
   function PreviewContent() {
     var defaultEmoji = variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji);
-
     if (!defaultEmoji) {
       return null;
     }
-
     var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
@@ -19148,13 +18786,13 @@ function PreviewBody() {
       size: 45,
       getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
-      className: flairup.cx(styles$4.label)
+      className: flairup.cx(styles$5.label)
     }, emojiName(emoji)) : React.createElement("div", {
-      className: flairup.cx(styles$4.label)
+      className: flairup.cx(styles$5.label)
     }, defaultText));
   }
 }
-var styles$4 = /*#__PURE__*/stylesheet.create({
+var styles$5 = /*#__PURE__*/stylesheet.create({
   preview: {
     alignItems: 'center',
     borderTop: '1px solid var(--epr-preview-border-color)',
@@ -19173,7 +18811,6 @@ var styles$4 = /*#__PURE__*/stylesheet.create({
 
 function categoryNameFromDom($category) {
   var _$category$getAttribu;
-
   return (_$category$getAttribu = $category == null ? void 0 : $category.getAttribute('data-name')) != null ? _$category$getAttribu : null;
 }
 
@@ -19186,27 +18823,20 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
       if (!bodyRef) {
         return;
       }
-
       for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
         var entry = _step.value;
-
         var _id = categoryNameFromDom(entry.target);
-
         visibleCategories.set(_id, entry.intersectionRatio);
       }
-
       var ratios = Array.from(visibleCategories);
       var lastCategory = ratios[ratios.length - 1];
-
       if (lastCategory[1] == 1) {
         return setActiveCategory(lastCategory[0]);
       }
-
       for (var _i = 0, _ratios = ratios; _i < _ratios.length; _i++) {
         var _ratios$_i = _ratios[_i],
-            id = _ratios$_i[0],
-            ratio = _ratios$_i[1];
-
+          id = _ratios$_i[0],
+          ratio = _ratios$_i[1];
         if (ratio) {
           setActiveCategory(id);
           break;
@@ -19223,8 +18853,7 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
 
 function useIsSearchMode() {
   var _useSearchTermState = useSearchTermState(),
-      searchTerm = _useSearchTermState[0];
-
+    searchTerm = _useSearchTermState[0];
   return !!searchTerm;
 }
 
@@ -19233,17 +18862,13 @@ function useScrollCategoryIntoView() {
   var PickerMainRef = usePickerMainRef();
   return function scrollCategoryIntoView(category) {
     var _BodyRef$current;
-
     if (!BodyRef.current) {
       return;
     }
-
     var $category = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.querySelector("[data-name=\"" + category + "\"]");
-
     if (!$category) {
       return;
     }
-
     var offsetTop = $category.offsetTop || 0;
     scrollTo(PickerMainRef.current, offsetTop);
   };
@@ -19251,19 +18876,16 @@ function useScrollCategoryIntoView() {
 
 function useShouldHideCustomEmojis() {
   var customCategoryConfig = useCustomEmojisConfig();
-
   if (!customCategoryConfig) {
     return false;
   }
-
   return customCategoryConfig.length === 0;
 }
 
 function CategoryNavigation() {
   var _useState = React.useState(null),
-      activeCategory = _useState[0],
-      setActiveCategory = _useState[1];
-
+    activeCategory = _useState[0],
+    setActiveCategory = _useState[1];
   var scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection(setActiveCategory);
   var isSearchMode = useIsSearchMode();
@@ -19271,24 +18893,21 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: "epr-category-nav",
+    className: flairup.cx(styles$6.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
     ref: CategoryNavigationRef
   }, categoriesConfig.map(function (categoryConfig) {
     var _cx;
-
     var category = categoryFromCategoryConfig(categoryConfig);
     var isActiveCategory = category === activeCategory;
-
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {
       return null;
     }
-
     return React.createElement(Button, {
       tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
-      className: flairup.cx('epr-cat-btn', "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+      className: flairup.cx(styles$6.catBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
       key: category,
       onClick: function onClick() {
         setActiveCategory(category);
@@ -19301,21 +18920,62 @@ function CategoryNavigation() {
     });
   }));
 }
+var styles$6 = /*#__PURE__*/stylesheet.create({
+  nav: {
+    '.': 'epr-category-nav',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 'var(--epr-header-padding)'
+  },
+  '.epr-search-active': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  '.epr-main:has(input:not(:placeholder-shown))': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  catBtn: {
+    '.': 'epr-cat-btn',
+    display: 'inline-block',
+    transition: 'opacity 0.2s ease-in-out',
+    position: 'relative',
+    height: 'var(--epr-category-navigation-button-size)',
+    width: 'var(--epr-category-navigation-button-size)',
+    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
+    outline: 'none',
+    backgroundPosition: '0 0',
+    ':focus:before': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      bottom: '-2px',
+      border: '2px solid var(--epr-category-icon-active-color)',
+      borderRadius: '50%'
+    }
+  }
+});
 
 var SCOPE = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
 var EMOJI_BUTTON = /*#__PURE__*/['button', asSelectors(ClassNames.emoji)].join('');
 var CATEGORY = /*#__PURE__*/asSelectors(ClassNames.category);
 function CssSearch(_ref) {
   var value = _ref.value;
-
   if (!value) {
     return null;
   }
-
   var q = genQuery(value);
   return React.createElement("style", null, "\n    " + SCOPE + " " + EMOJI_BUTTON + " {\n      display: none;\n    }\n\n\n    " + SCOPE + " " + q + " {\n      display: flex;\n    }\n\n    " + SCOPE + " " + CATEGORY + ":not(:has(" + q + ")) {\n      display: none;\n    }\n  ");
 }
-
 function genQuery(value) {
   return [EMOJI_BUTTON, '[data-full-name*="', getNormalizedSearchTerm(value), '"]'].join('');
 }
@@ -19323,16 +18983,14 @@ function genQuery(value) {
 function SearchContainer() {
   var searchDisabled = useSearchDisabledConfig();
   var isSkinToneInSearch = useIsSkinToneInSearch();
-
   if (searchDisabled) {
     return null;
   }
-
   return React.createElement(Flex, {
-    className: flairup.cx(styles$5.overlay)
+    className: flairup.cx(styles$7.overlay)
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
-var styles$5 = /*#__PURE__*/stylesheet.create({
+var styles$7 = /*#__PURE__*/stylesheet.create({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'
@@ -19340,20 +18998,17 @@ var styles$5 = /*#__PURE__*/stylesheet.create({
 });
 function Search() {
   var _useState = React.useState(0),
-      inc = _useState[0],
-      setInc = _useState[1];
-
+    inc = _useState[0],
+    setInc = _useState[1];
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var SearchInputRef = useSearchInputRef();
   var clearSearch = useClearSearch();
   var placeholder = useSearchPlaceHolderConfig();
   var autoFocus = useAutoFocusSearchConfig();
-
   var _useFilter = useFilter(),
-      statusSearchResults = _useFilter.statusSearchResults,
-      searchTerm = _useFilter.searchTerm,
-      _onChange = _useFilter.onChange;
-
+    statusSearchResults = _useFilter.statusSearchResults,
+    searchTerm = _useFilter.searchTerm,
+    _onChange = _useFilter.onChange;
   var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
   var value = input == null ? void 0 : input.value;
   return React.createElement(Relative, {
@@ -19373,7 +19028,6 @@ function Search() {
       setInc(inc + 1);
       setTimeout(function () {
         var _event$target$value, _event$target;
-
         _onChange((_event$target$value = event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) != null ? _event$target$value : value);
       });
     },
@@ -19407,7 +19061,6 @@ function getActiveElement() {
 }
 
 var KeyboardEvents;
-
 (function (KeyboardEvents) {
   KeyboardEvents["ArrowDown"] = "ArrowDown";
   KeyboardEvents["ArrowUp"] = "ArrowUp";
@@ -19417,7 +19070,6 @@ var KeyboardEvents;
   KeyboardEvents["Enter"] = "Enter";
   KeyboardEvents["Space"] = " ";
 })(KeyboardEvents || (KeyboardEvents = {}));
-
 function useKeyboardNavigation() {
   usePickerMainKeyboardEvents();
   useSearchInputKeyboardEvents();
@@ -19425,7 +19077,6 @@ function useKeyboardNavigation() {
   useCategoryNavigationKeyboardEvents();
   useBodyKeyboardEvents();
 }
-
 function usePickerMainKeyboardEvents() {
   var PickerMainRef = usePickerMainRef();
   var clearSearch = useClearSearch();
@@ -19439,17 +19090,14 @@ function usePickerMainKeyboardEvents() {
     return function onKeyDown(event) {
       var key = event.key;
       disallowMouseMove();
-
       switch (key) {
         // eslint-disable-next-line no-fallthrough
         case KeyboardEvents.Escape:
           event.preventDefault();
-
           if (hasOpenToggles()) {
             closeAllOpenToggles();
             return;
           }
-
           clearSearch();
           scrollTo(0);
           focusSearchInput();
@@ -19459,49 +19107,40 @@ function usePickerMainKeyboardEvents() {
   }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput, hasOpenToggles, disallowMouseMove]);
   React.useEffect(function () {
     var current = PickerMainRef.current;
-
     if (!current) {
       return;
     }
-
     current.addEventListener('keydown', onKeyDown);
     return function () {
       current.removeEventListener('keydown', onKeyDown);
     };
   }, [PickerMainRef, SearchInputRef, scrollTo, onKeyDown]);
 }
-
 function useSearchInputKeyboardEvents() {
   var focusSkinTonePicker = useFocusSkinTonePicker();
   var PickerMainRef = usePickerMainRef();
   var BodyRef = useBodyRef();
   var SearchInputRef = useSearchInputRef();
-
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
-      setSkinToneFanOpenState = _useSkinToneFanOpenSt[1];
-
+    setSkinToneFanOpenState = _useSkinToneFanOpenSt[1];
   var goDownFromSearchInput = useGoDownFromSearchInput();
   var isSkinToneInSearch = useIsSkinToneInSearch();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
-
       switch (key) {
         case KeyboardEvents.ArrowRight:
           if (!isSkinToneInSearch) {
             return;
           }
-
           event.preventDefault();
           setSkinToneFanOpenState(true);
           focusSkinTonePicker();
           break;
-
         case KeyboardEvents.ArrowDown:
           event.preventDefault();
           goDownFromSearchInput();
           break;
-
         case KeyboardEvents.Enter:
           event.preventDefault();
           focusAndClickFirstVisibleEmoji(BodyRef.current);
@@ -19511,96 +19150,75 @@ function useSearchInputKeyboardEvents() {
   }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef, isSkinToneInSearch]);
   React.useEffect(function () {
     var current = SearchInputRef.current;
-
     if (!current) {
       return;
     }
-
     current.addEventListener('keydown', onKeyDown);
     return function () {
       current.removeEventListener('keydown', onKeyDown);
     };
   }, [PickerMainRef, SearchInputRef, onKeyDown]);
 }
-
 function useSkinTonePickerKeyboardEvents() {
   var SkinTonePickerRef = useSkinTonePickerRef();
   var focusSearchInput = useFocusSearchInput();
   var SearchInputRef = useSearchInputRef();
   var goDownFromSearchInput = useGoDownFromSearchInput();
-
   var _useSkinToneFanOpenSt2 = useSkinToneFanOpenState(),
-      isOpen = _useSkinToneFanOpenSt2[0],
-      setIsOpen = _useSkinToneFanOpenSt2[1];
-
+    isOpen = _useSkinToneFanOpenSt2[0],
+    setIsOpen = _useSkinToneFanOpenSt2[1];
   var isSkinToneInPreview = useIsSkinToneInPreview();
   var isSkinToneInSearch = useIsSkinToneInSearch();
   var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
-    return (// eslint-disable-next-line complexity
+    return (
+      // eslint-disable-next-line complexity
       function onKeyDown(event) {
         var key = event.key;
-
         if (isSkinToneInSearch) {
           switch (key) {
             case KeyboardEvents.ArrowLeft:
               event.preventDefault();
-
               if (!isOpen) {
                 return focusSearchInput();
               }
-
               focusNextSkinTone(focusSearchInput);
               break;
-
             case KeyboardEvents.ArrowRight:
               event.preventDefault();
-
               if (!isOpen) {
                 return focusSearchInput();
               }
-
               focusPrevSkinTone();
               break;
-
             case KeyboardEvents.ArrowDown:
               event.preventDefault();
-
               if (isOpen) {
                 setIsOpen(false);
               }
-
               goDownFromSearchInput();
               break;
-
             default:
               onType(event);
               break;
           }
         }
-
         if (isSkinToneInPreview) {
           switch (key) {
             case KeyboardEvents.ArrowUp:
               event.preventDefault();
-
               if (!isOpen) {
                 return focusSearchInput();
               }
-
               focusNextSkinTone(focusSearchInput);
               break;
-
             case KeyboardEvents.ArrowDown:
               event.preventDefault();
-
               if (!isOpen) {
                 return focusSearchInput();
               }
-
               focusPrevSkinTone();
               break;
-
             default:
               onType(event);
               break;
@@ -19611,18 +19229,15 @@ function useSkinTonePickerKeyboardEvents() {
   }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType, isSkinToneInPreview, isSkinToneInSearch]);
   React.useEffect(function () {
     var current = SkinTonePickerRef.current;
-
     if (!current) {
       return;
     }
-
     current.addEventListener('keydown', onKeyDown);
     return function () {
       current.removeEventListener('keydown', onKeyDown);
     };
   }, [SkinTonePickerRef, SearchInputRef, isOpen, onKeyDown]);
 }
-
 function useCategoryNavigationKeyboardEvents() {
   var focusSearchInput = useFocusSearchInput();
   var CategoryNavigationRef = useCategoryNavigationRef();
@@ -19631,28 +19246,23 @@ function useCategoryNavigationKeyboardEvents() {
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
-
       switch (key) {
         case KeyboardEvents.ArrowUp:
           event.preventDefault();
           focusSearchInput();
           break;
-
         case KeyboardEvents.ArrowRight:
           event.preventDefault();
           focusNextElementSibling(getActiveElement());
           break;
-
         case KeyboardEvents.ArrowLeft:
           event.preventDefault();
           focusPrevElementSibling(getActiveElement());
           break;
-
         case KeyboardEvents.ArrowDown:
           event.preventDefault();
           focusFirstVisibleEmoji(BodyRef.current);
           break;
-
         default:
           onType(event);
           break;
@@ -19661,18 +19271,15 @@ function useCategoryNavigationKeyboardEvents() {
   }, [BodyRef, focusSearchInput, onType]);
   React.useEffect(function () {
     var current = CategoryNavigationRef.current;
-
     if (!current) {
       return;
     }
-
     current.addEventListener('keydown', onKeyDown);
     return function () {
       current.removeEventListener('keydown', onKeyDown);
     };
   }, [CategoryNavigationRef, BodyRef, onKeyDown]);
 }
-
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
@@ -19681,49 +19288,40 @@ function useBodyKeyboardEvents() {
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
-    return (// eslint-disable-next-line complexity
+    return (
+      // eslint-disable-next-line complexity
       function onKeyDown(event) {
         var key = event.key;
         var activeElement = buttonFromTarget(getActiveElement());
-
         switch (key) {
           case KeyboardEvents.ArrowRight:
             event.preventDefault();
             focusNextVisibleEmoji(activeElement);
             break;
-
           case KeyboardEvents.ArrowLeft:
             event.preventDefault();
             focusPrevVisibleEmoji(activeElement);
             break;
-
           case KeyboardEvents.ArrowDown:
             event.preventDefault();
-
             if (hasOpenToggles()) {
               closeAllOpenToggles();
               break;
             }
-
             focusVisibleEmojiOneRowDown(activeElement);
             break;
-
           case KeyboardEvents.ArrowUp:
             event.preventDefault();
-
             if (hasOpenToggles()) {
               closeAllOpenToggles();
               break;
             }
-
             focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
             break;
-
           case KeyboardEvents.Space:
             event.preventDefault();
             setVariationPicker(event.target);
             break;
-
           default:
             onType(event);
             break;
@@ -19733,18 +19331,15 @@ function useBodyKeyboardEvents() {
   }, [goUpFromBody, onType, setVariationPicker, hasOpenToggles, closeAllOpenToggles]);
   React.useEffect(function () {
     var current = BodyRef.current;
-
     if (!current) {
       return;
     }
-
     current.addEventListener('keydown', onKeyDown);
     return function () {
       current.removeEventListener('keydown', onKeyDown);
     };
   }, [BodyRef, onKeyDown]);
 }
-
 function useGoDownFromSearchInput() {
   var focusCategoryNavigation = useFocusCategoryNavigation();
   var isSearchMode = useIsSearchMode();
@@ -19753,11 +19348,9 @@ function useGoDownFromSearchInput() {
     if (isSearchMode) {
       return focusFirstVisibleEmoji(BodyRef.current);
     }
-
     return focusCategoryNavigation();
   }, [BodyRef, focusCategoryNavigation, isSearchMode]);
 }
-
 function useGoUpFromBody() {
   var focusSearchInput = useFocusSearchInput();
   var focusCategoryNavigation = useFocusCategoryNavigation();
@@ -19766,35 +19359,26 @@ function useGoUpFromBody() {
     if (isSearchMode) {
       return focusSearchInput();
     }
-
     return focusCategoryNavigation();
   }, [focusSearchInput, isSearchMode, focusCategoryNavigation]);
 }
-
 function focusNextSkinTone(exitLeft) {
   var currentSkinTone = getActiveElement();
-
   if (!currentSkinTone) {
     return;
   }
-
   if (!hasNextElementSibling(currentSkinTone)) {
     exitLeft();
   }
-
   focusNextElementSibling(currentSkinTone);
 }
-
 function focusPrevSkinTone() {
   var currentSkinTone = getActiveElement();
-
   if (!currentSkinTone) {
     return;
   }
-
   focusPrevElementSibling(currentSkinTone);
 }
-
 function useOnType() {
   var appendSearch = useAppendSearch();
   var focusSearchInput = useFocusSearchInput();
@@ -19802,11 +19386,9 @@ function useOnType() {
   var closeAllOpenToggles = useCloseAllOpenToggles();
   return function onType(event) {
     var key = event.key;
-
     if (hasModifier(event) || searchDisabled) {
       return;
     }
-
     if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
       event.preventDefault();
       closeAllOpenToggles();
@@ -19815,11 +19397,10 @@ function useOnType() {
     }
   };
 }
-
 function hasModifier(event) {
   var metaKey = event.metaKey,
-      ctrlKey = event.ctrlKey,
-      altKey = event.altKey;
+    ctrlKey = event.ctrlKey,
+    altKey = event.altKey;
   return metaKey || ctrlKey || altKey;
 }
 
@@ -19827,17 +19408,13 @@ function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   if (!emoji) {
     return;
   }
-
   if (emojiStyle === exports.EmojiStyle.NATIVE) {
     return;
   }
-
   var unified = emojiUnified(emoji);
-
   if (preloadedEmojs.has(unified)) {
     return;
   }
-
   emojiVariations(emoji).forEach(function (variation) {
     var emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
@@ -19845,7 +19422,6 @@ function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   preloadedEmojs.add(unified);
 }
 var preloadedEmojs = /*#__PURE__*/new Set();
-
 function preloadImage(url) {
   var image = new Image();
   image.src = url;
@@ -19859,27 +19435,21 @@ function useOnFocus() {
     if (emojiStyle === exports.EmojiStyle.NATIVE) {
       return;
     }
-
     var bodyRef = BodyRef.current;
     bodyRef == null ? void 0 : bodyRef.addEventListener('focusin', onFocus);
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('focusin', onFocus);
     };
-
     function onFocus(event) {
       var button = buttonFromTarget(event.target);
-
       if (!button) {
         return;
       }
-
       var _emojiFromElement = emojiFromElement(button),
-          emoji = _emojiFromElement[0];
-
+        emoji = _emojiFromElement[0];
       if (!emoji) {
         return;
       }
-
       if (emojiHasVariations(emoji)) {
         preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
@@ -19891,10 +19461,8 @@ function PickerMain(_ref) {
   var children = _ref.children;
   return React.createElement(PickerContextProvider, null, React.createElement(PickerRootElement, null, children));
 }
-
 function PickerRootElement(_ref2) {
   var _cx;
-
   var children = _ref2.children;
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
@@ -19904,12 +19472,11 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   return React.createElement("aside", {
-    className: flairup.cx(styles$6.main, styles$6.baseVariables, theme === exports.Theme.DARK && styles$6.darkTheme, theme === exports.Theme.AUTO && styles$6.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), className),
+    className: flairup.cx(styles$8.main, styles$8.baseVariables, theme === exports.Theme.DARK && styles$8.darkTheme, theme === exports.Theme.AUTO && styles$8.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), className),
     ref: PickerMainRef,
     style: style
   }, children);
 }
-
 var DarkTheme = {
   '--epr-emoji-variation-picker-bg-color': 'var(--epr-dark-emoji-variation-picker-bg-color)',
   '--epr-highlight-color': 'var(--epr-dark-highlight-color)',
@@ -19925,7 +19492,7 @@ var DarkTheme = {
   '--epr-category-icon-active-color': 'var(--epr-dark-category-icon-active-color)',
   '--epr-skin-tone-picker-menu-color': 'var(--epr-dark-skin-tone-picker-menu-color)'
 };
-var styles$6 = /*#__PURE__*/stylesheet.create({
+var styles$8 = /*#__PURE__*/stylesheet.create({
   main: {
     '.': ['epr-main', ClassNames.emojiPicker],
     position: 'relative',
@@ -19951,15 +19518,12 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
       '--epr-horizontal-padding': '10px',
       '--epr-picker-border-radius': '8px',
-
       /* Header */
       '--epr-search-border-color': 'var(--epr-highlight-color)',
       '--epr-header-padding': '15px var(--epr-horizontal-padding)',
-
       /* Skin Tone Picker */
       '--epr-active-skin-tone-indicator-border-color': 'var(--epr-highlight-color)',
       '--epr-active-skin-hover-color': 'var(--epr-hover-bg-color)',
-
       /* Search */
       '--epr-search-input-bg-color-active': 'var(--epr-search-input-bg-color)',
       '--epr-search-input-padding': '0 30px',
@@ -19968,30 +19532,24 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
       '--epr-search-input-text-color': 'var(--epr-text-color)',
       '--epr-search-input-placeholder-color': 'var(--epr-text-color)',
       '--epr-search-bar-inner-padding': 'var(--epr-horizontal-padding)',
-
       /*  Category Navigation */
       '--epr-category-navigation-button-size': '30px',
-
       /* Variation Picker */
       '--epr-emoji-variation-picker-height': '45px',
       '--epr-emoji-variation-picker-bg-color': 'var(--epr-bg-color)',
-
       /*  Preview */
       '--epr-preview-height': '70px',
       '--epr-preview-text-size': '14px',
       '--epr-preview-text-padding': '0 var(--epr-horizontal-padding)',
       '--epr-preview-border-color': 'var(--epr-picker-border-color)',
       '--epr-preview-text-color': 'var(--epr-text-color)',
-
       /* Category */
       '--epr-category-padding': '0 var(--epr-horizontal-padding)',
-
       /*  Category Label */
       '--epr-category-label-bg-color': '#ffffffe6',
       '--epr-category-label-text-color': 'var(--epr-text-color)',
       '--epr-category-label-padding': '0 var(--epr-horizontal-padding)',
       '--epr-category-label-height': '40px',
-
       /*  Emoji */
       '--epr-emoji-size': '30px',
       '--epr-emoji-padding': '5px',
@@ -19999,14 +19557,12 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
       '--epr-emoji-hover-color': 'var(--epr-hover-bg-color)',
       '--epr-emoji-variation-indicator-color': 'var(--epr-picker-border-color)',
       '--epr-emoji-variation-indicator-color-hover': 'var(--epr-text-color)',
-
       /* Z-Index */
       '--epr-header-overlay-z-index': '3',
       '--epr-emoji-variations-indictator-z-index': '1',
       '--epr-category-label-z-index': '2',
       '--epr-skin-variation-picker-z-index': '5',
       '--epr-preview-z-index': '6',
-
       /* Dark Theme Variables */
       '--epr-dark': '#000',
       '--epr-dark-emoji-variation-picker-bg-color': 'var(--epr-dark)',
@@ -20038,12 +19594,10 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
 
 function EmojiPicker(props) {
   return React.createElement(ElementRefContextProvider, null, React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(PickerMain, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null))));
-} // eslint-disable-next-line complexity
-
-
+}
+// eslint-disable-next-line complexity
 var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (prev, next) {
   var _prev$customEmojis, _next$customEmojis;
-
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
   return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
@@ -20051,56 +19605,46 @@ var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (prev, next
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ErrorBoundary, _React$Component);
-
   function ErrorBoundary(props) {
     var _this;
-
     _this = _React$Component.call(this, props) || this;
     _this.state = {
       hasError: false
     };
     return _this;
   }
-
   ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError() {
     return {
       hasError: true
     };
   };
-
   var _proto = ErrorBoundary.prototype;
-
   _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
     // eslint-disable-next-line no-console
     console.error('Emoji Picker React failed to render:', error, errorInfo);
   };
-
   _proto.render = function render() {
     if (this.state.hasError) {
       return null;
     }
-
     return this.props.children;
   };
-
   return ErrorBoundary;
 }(React.Component);
 
 function ExportedEmoji(_ref) {
   var unified = _ref.unified,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 32 : _ref$size,
-      _ref$emojiStyle = _ref.emojiStyle,
-      emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
-      _ref$lazyLoad = _ref.lazyLoad,
-      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
-      getEmojiUrl = _ref.getEmojiUrl,
-      emojiUrl = _ref.emojiUrl;
-
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$emojiStyle = _ref.emojiStyle,
+    emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
+    _ref$lazyLoad = _ref.lazyLoad,
+    lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+    getEmojiUrl = _ref.getEmojiUrl,
+    emojiUrl = _ref.emojiUrl;
   if (!unified && !emojiUrl && !getEmojiUrl) {
     return null;
   }
-
   return React.createElement(ViewOnlyEmoji, {
     unified: unified,
     size: size,