emoji-picker-react 4.6.6-rc.6 → 4.6.6

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

@@ -9,6 +9,7 @@ var React__default = _interopDefault(React);
 var flairup = require('flairup');
 
 var ClassNames;
+
 (function (ClassNames) {
   ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
   ClassNames["searchActive"] = "epr-search-active";
@@ -31,10 +32,12 @@ 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('');
@@ -61,6 +64,7 @@ function focusElement(element) {
   if (!element) {
     return;
   }
+
   requestAnimationFrame(function () {
     element.focus();
   });
@@ -111,9 +115,11 @@ var ElementRefContext = /*#__PURE__*/React.createContext({
   SkinTonePickerRef: /*#__PURE__*/React.createRef(),
   VariationPickerRef: /*#__PURE__*/React.createRef()
 });
+
 function useElementRef() {
   return React.useContext(ElementRefContext);
 }
+
 function usePickerMainRef() {
   return useElementRef()['PickerMainRef'];
 }
@@ -126,6 +132,7 @@ function useSetAnchoredEmojiRef() {
     if (target === null && AnchoredEmojiRef.current !== null) {
       focusElement(AnchoredEmojiRef.current);
     }
+
     AnchoredEmojiRef.current = target;
   };
 }
@@ -149,21 +156,26 @@ 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;
@@ -171,18 +183,22 @@ 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);
@@ -191,14 +207,19 @@ 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;
@@ -212,6 +233,7 @@ 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.");
 }
 
@@ -219,6 +241,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   SuggestionMode["RECENT"] = "recent";
   SuggestionMode["FREQUENT"] = "frequent";
 })(exports.SuggestionMode || (exports.SuggestionMode = {}));
+
 (function (EmojiStyle) {
   EmojiStyle["NATIVE"] = "native";
   EmojiStyle["APPLE"] = "apple";
@@ -226,11 +249,13 @@ 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";
@@ -239,6 +264,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   SkinTones["MEDIUM_DARK"] = "1f3fe";
   SkinTones["DARK"] = "1f3ff";
 })(exports.SkinTones || (exports.SkinTones = {}));
+
 (function (Categories) {
   Categories["SUGGESTED"] = "suggested";
   Categories["CUSTOM"] = "custom";
@@ -251,6 +277,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   Categories["SYMBOLS"] = "symbols";
   Categories["FLAGS"] = "flags";
 })(exports.Categories || (exports.Categories = {}));
+
 (function (SkinTonePickerLocation) {
   SkinTonePickerLocation["SEARCH"] = "SEARCH";
   SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
@@ -306,31 +333,41 @@ 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);
 }
 
@@ -342,10 +379,13 @@ 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;
@@ -16678,16 +16718,18 @@ 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";
@@ -16707,6 +16749,7 @@ 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;
   });
@@ -16714,6 +16757,7 @@ function indexEmoji(emoji) {
 
 function emojiNames(emoji) {
   var _emoji$EmojiPropertie;
+
   return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
 }
 function addedIn(emoji) {
@@ -16723,36 +16767,45 @@ 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) {
@@ -16767,9 +16820,11 @@ function emojiByUnified(unified) {
   if (!unified) {
     return;
   }
+
   if (allEmojisByUnified[unified]) {
     return allEmojisByUnified[unified];
   }
+
   var withoutSkinTone = unifiedWithoutSkinTone(unified);
   return allEmojisByUnified[withoutSkinTone];
 }
@@ -16779,35 +16834,43 @@ 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;
 }
 
@@ -16819,9 +16882,11 @@ 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);
@@ -16871,7 +16936,8 @@ 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
@@ -16879,18 +16945,21 @@ 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;
 }
@@ -16912,82 +16981,98 @@ 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)
@@ -16995,38 +17080,47 @@ 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;
 }
 
@@ -17034,22 +17128,28 @@ 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];
 }
 
@@ -17065,13 +17165,16 @@ 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]);
@@ -17084,6 +17187,7 @@ function useIsEmojiDisallowed() {
     return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
   };
 }
+
 function addedInNewerVersion(emoji, supportedLevel) {
   return addedIn(emoji) > supportedLevel;
 }
@@ -17097,8 +17201,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);
@@ -17110,9 +17214,11 @@ 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: {
@@ -17159,54 +17265,64 @@ 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());
   }];
@@ -17239,11 +17355,13 @@ 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);
     };
@@ -17254,6 +17372,7 @@ function elementCountInRow(parent, element) {
   if (!parent || !element) {
     return 0;
   }
+
   var parentWidth = parent.getBoundingClientRect().width;
   var elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);
@@ -17262,6 +17381,7 @@ function elementIndexInRow(parent, element) {
   if (!parent || !element) {
     return 0;
   }
+
   var elementWidth = element.getBoundingClientRect().width;
   var elementLeft = element.getBoundingClientRect().left;
   var parentLeft = parent.getBoundingClientRect().left;
@@ -17271,6 +17391,7 @@ function rowNumber(parent, element) {
   if (!parent || !element) {
     return 0;
   }
+
   var elementHeight = element.getBoundingClientRect().height;
   var elementTop = element.getBoundingClientRect().top;
   var parentTop = parent.getBoundingClientRect().top;
@@ -17280,12 +17401,14 @@ 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);
@@ -17293,34 +17416,40 @@ 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) {
@@ -17338,43 +17467,53 @@ 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);
 }
@@ -17382,6 +17521,7 @@ function isEmojiBehindLabel(emoji) {
   if (!emoji) {
     return false;
   }
+
   return emojiDistanceFromScrollTop(emoji) < categoryLabelHeight(closestCategory(emoji));
 }
 function queryScrollBody(root) {
@@ -17390,16 +17530,20 @@ 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) {
@@ -17407,33 +17551,46 @@ 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);
 }
@@ -17445,86 +17602,110 @@ 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));
 }
 
@@ -17538,15 +17719,19 @@ 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 [];
@@ -17561,6 +17746,7 @@ function setSuggested(emoji, skinTone) {
     return u === unified;
   });
   var nextList;
+
   if (existing) {
     nextList = [existing].concat(recent.filter(function (i) {
       return i !== existing;
@@ -17573,14 +17759,15 @@ 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
   }
 }
 
@@ -17593,15 +17780,18 @@ 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);
     }
@@ -17610,9 +17800,11 @@ 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;
   };
@@ -17620,11 +17812,14 @@ 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);
@@ -17636,27 +17831,37 @@ 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);
@@ -17664,14 +17869,18 @@ 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;
@@ -17699,6 +17908,7 @@ function useMouseDownHandlers(BodyRef) {
     if (!BodyRef.current) {
       return;
     }
+
     var bodyRef = BodyRef.current;
     bodyRef.addEventListener('click', onClick, {
       passive: true
@@ -17716,17 +17926,23 @@ 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,
@@ -17740,6 +17956,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
       unifiedWithoutSkinTone: _unified
     };
   }
+
   var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
@@ -17748,6 +17965,7 @@ 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),
@@ -17762,15 +17980,19 @@ 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);
     };
@@ -17781,19 +18003,24 @@ 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;
   });
@@ -17812,9 +18039,11 @@ 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));
@@ -17832,6 +18061,7 @@ function useFocusSkinTonePicker() {
     if (!SkinTonePickerRef.current) {
       return;
     }
+
     focusFirstElementChild(SkinTonePickerRef.current);
   }, [SkinTonePickerRef]);
 }
@@ -17841,6 +18071,7 @@ function useFocusCategoryNavigation() {
     if (!CategoryNavigationRef.current) {
       return;
     }
+
     focusFirstElementChild(CategoryNavigationRef.current);
   }, [CategoryNavigationRef]);
 }
@@ -17851,9 +18082,11 @@ function useSetFilterRef() {
     if (typeof setter === 'function') {
       return setFilter(setter(filterRef.current));
     }
+
     filterRef.current = setter;
   };
 }
+
 function useClearSearch() {
   var applySearch = useApplySearch();
   var SearchInputRef = useSearchInputRef();
@@ -17862,6 +18095,7 @@ function useClearSearch() {
     if (SearchInputRef.current) {
       SearchInputRef.current.value = '';
     }
+
     applySearch('');
     focusSearchInput();
   };
@@ -17883,8 +18117,10 @@ 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,
@@ -17892,28 +18128,36 @@ 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 () {
@@ -17923,71 +18167,92 @@ 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);
@@ -18005,29 +18270,21 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: flairup.cx(styles.button, props.className)
+    className: flairup.cx('epr-btn', 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,
@@ -18038,11 +18295,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,
@@ -18055,7 +18312,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,
@@ -18065,22 +18322,28 @@ 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,
@@ -18091,6 +18354,7 @@ function ViewOnlyEmoji(_ref) {
       onError: onError
     });
   }
+
   return React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
     unified: unified,
     style: style
@@ -18102,6 +18366,7 @@ function ViewOnlyEmoji(_ref) {
     imgUrl: getEmojiUrl(unified, emojiStyle),
     onError: onError
   }));
+
   function onError() {
     setEmojisThatFailedToLoad(function (prev) {
       return new Set(prev).add(unified);
@@ -18111,15 +18376,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,
@@ -18140,22 +18405,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$1.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
+    className: flairup.cx(styles.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
-    className: flairup.cx(styles$1.label)
+    className: flairup.cx(styles.label)
   }, categoryName), React.createElement("div", {
-    className: flairup.cx(styles$1.categoryContent)
+    className: flairup.cx(styles.categoryContent)
   }, children));
 }
-var styles$1 = /*#__PURE__*/stylesheet.create({
+var styles = /*#__PURE__*/stylesheet.create({
   category: {
     '.': ClassNames.category,
     ':not(:has(.epr-visible))': {
@@ -18194,15 +18459,17 @@ var styles$1 = /*#__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, {
@@ -18211,9 +18478,11 @@ 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,
@@ -18229,15 +18498,17 @@ function EmojiList() {
   var categories = useCategoriesConfig();
   var renderdCategoriesCountRef = React.useRef(0);
   return React.createElement("ul", {
-    className: flairup.cx(styles$2.emojiList)
+    className: flairup.cx(styles$1.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,
@@ -18246,39 +18517,49 @@ 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,
@@ -18298,7 +18579,8 @@ function RenderCategory(_ref) {
     hidden: hiddenCounter === emojis.length
   }, emojis);
 }
-var styles$2 = /*#__PURE__*/stylesheet.create({
+
+var styles$1 = /*#__PURE__*/stylesheet.create({
   emojiList: {
     '.': ClassNames.emojiList,
     listStyle: 'none',
@@ -18324,10 +18606,13 @@ function focusNextVisibleEmoji(element) {
   if (!element) {
     return;
   }
+
   var next = nextVisibleEmoji(element);
+
   if (!next) {
     return focusFirstVisibleEmoji(nextCategory(element));
   }
+
   focusElement(next);
   scrollEmojiAboveLabel(next);
 }
@@ -18335,10 +18620,13 @@ function focusPrevVisibleEmoji(element) {
   if (!element) {
     return;
   }
+
   var prev = prevVisibleEmoji(element);
+
   if (!prev) {
     return focusLastVisibleEmoji(prevCategory(element));
   }
+
   focusElement(prev);
   scrollEmojiAboveLabel(prev);
 }
@@ -18346,10 +18634,13 @@ function focusVisibleEmojiOneRowUp(element, exitUp) {
   if (!element) {
     return;
   }
+
   var prev = visibleEmojiOneRowUp(element);
+
   if (!prev) {
     return exitUp();
   }
+
   focusElement(prev);
   scrollEmojiAboveLabel(prev);
 }
@@ -18357,63 +18648,81 @@ 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();
@@ -18423,15 +18732,18 @@ 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, {
@@ -18455,25 +18767,32 @@ 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();
@@ -18482,28 +18801,36 @@ 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;
   }
 }
@@ -18514,11 +18841,11 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return React.createElement("div", {
-    className: flairup.cx(styles$3.body),
+    className: flairup.cx(styles$2.body),
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
-var styles$3 = /*#__PURE__*/stylesheet.create({
+var styles$2 = /*#__PURE__*/stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
     flex: '1',
@@ -18536,6 +18863,7 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
     if (!allow) {
       return;
     }
+
     var bodyRef = BodyRef.current;
     bodyRef == null ? void 0 : bodyRef.addEventListener('keydown', onEscape, {
       passive: true
@@ -18546,44 +18874,57 @@ 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);
@@ -18605,23 +18946,25 @@ 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$4.flex, className, styles$4[direction])
+    className: flairup.cx(styles$3.flex, className, styles$3[direction])
   }, children);
 }
-var styles$4 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
+var styles$3 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
   flex: {
     display: 'flex'
   }
@@ -18633,8 +18976,8 @@ var styles$4 = /*#__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
@@ -18645,8 +18988,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'
@@ -18657,8 +19000,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'
@@ -18684,21 +19027,27 @@ 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;
@@ -18715,6 +19064,7 @@ function SkinTonePicker(_ref) {
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var _cx2;
+
     var active = skinToneVariation === activeSkinTone;
     return React.createElement(Button, {
       style: {
@@ -18727,6 +19077,7 @@ function SkinTonePicker(_ref) {
         } else {
           setIsOpen(true);
         }
+
         closeAllOpenToggles();
       },
       key: skinToneVariation,
@@ -18738,6 +19089,7 @@ function SkinTonePicker(_ref) {
   })));
 }
 var SkinTonePickerDirection;
+
 (function (SkinTonePickerDirection) {
   SkinTonePickerDirection["VERTICAL"] = "epr-vertical";
   SkinTonePickerDirection["HORIZONTAL"] = "epr-horizontal";
@@ -18746,32 +19098,42 @@ var SkinTonePickerDirection;
 function Preview() {
   var previewConfig = usePreviewConfig();
   var isSkinToneInPreview = useIsSkinToneInPreview();
+
   if (!previewConfig.showPreview) {
     return null;
   }
+
   return React.createElement(Flex, {
-    className: flairup.cx(styles$5.preview)
+    className: flairup.cx(styles$4.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,
@@ -18786,13 +19148,13 @@ function PreviewBody() {
       size: 45,
       getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
-      className: flairup.cx(styles$5.label)
+      className: flairup.cx(styles$4.label)
     }, emojiName(emoji)) : React.createElement("div", {
-      className: flairup.cx(styles$5.label)
+      className: flairup.cx(styles$4.label)
     }, defaultText));
   }
 }
-var styles$5 = /*#__PURE__*/stylesheet.create({
+var styles$4 = /*#__PURE__*/stylesheet.create({
   preview: {
     alignItems: 'center',
     borderTop: '1px solid var(--epr-preview-border-color)',
@@ -18811,6 +19173,7 @@ var styles$5 = /*#__PURE__*/stylesheet.create({
 
 function categoryNameFromDom($category) {
   var _$category$getAttribu;
+
   return (_$category$getAttribu = $category == null ? void 0 : $category.getAttribute('data-name')) != null ? _$category$getAttribu : null;
 }
 
@@ -18823,20 +19186,27 @@ 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;
@@ -18853,7 +19223,8 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
 
 function useIsSearchMode() {
   var _useSearchTermState = useSearchTermState(),
-    searchTerm = _useSearchTermState[0];
+      searchTerm = _useSearchTermState[0];
+
   return !!searchTerm;
 }
 
@@ -18862,13 +19233,17 @@ 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);
   };
@@ -18876,16 +19251,19 @@ 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();
@@ -18893,21 +19271,24 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: flairup.cx(styles$6.nav),
+    className: "epr-category-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(styles$6.catBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+      className: flairup.cx('epr-cat-btn', "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
       key: category,
       onClick: function onClick() {
         setActiveCategory(category);
@@ -18920,62 +19301,21 @@ 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('');
 }
@@ -18983,14 +19323,16 @@ function genQuery(value) {
 function SearchContainer() {
   var searchDisabled = useSearchDisabledConfig();
   var isSkinToneInSearch = useIsSkinToneInSearch();
+
   if (searchDisabled) {
     return null;
   }
+
   return React.createElement(Flex, {
-    className: flairup.cx(styles$7.overlay)
+    className: flairup.cx(styles$5.overlay)
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
-var styles$7 = /*#__PURE__*/stylesheet.create({
+var styles$5 = /*#__PURE__*/stylesheet.create({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'
@@ -18998,17 +19340,20 @@ var styles$7 = /*#__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, {
@@ -19028,6 +19373,7 @@ 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);
       });
     },
@@ -19061,6 +19407,7 @@ function getActiveElement() {
 }
 
 var KeyboardEvents;
+
 (function (KeyboardEvents) {
   KeyboardEvents["ArrowDown"] = "ArrowDown";
   KeyboardEvents["ArrowUp"] = "ArrowUp";
@@ -19070,6 +19417,7 @@ var KeyboardEvents;
   KeyboardEvents["Enter"] = "Enter";
   KeyboardEvents["Space"] = " ";
 })(KeyboardEvents || (KeyboardEvents = {}));
+
 function useKeyboardNavigation() {
   usePickerMainKeyboardEvents();
   useSearchInputKeyboardEvents();
@@ -19077,6 +19425,7 @@ function useKeyboardNavigation() {
   useCategoryNavigationKeyboardEvents();
   useBodyKeyboardEvents();
 }
+
 function usePickerMainKeyboardEvents() {
   var PickerMainRef = usePickerMainRef();
   var clearSearch = useClearSearch();
@@ -19090,14 +19439,17 @@ 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();
@@ -19107,40 +19459,49 @@ 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);
@@ -19150,75 +19511,96 @@ 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;
@@ -19229,15 +19611,18 @@ 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();
@@ -19246,23 +19631,28 @@ 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;
@@ -19271,15 +19661,18 @@ 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();
@@ -19288,40 +19681,49 @@ 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;
@@ -19331,15 +19733,18 @@ 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();
@@ -19348,9 +19753,11 @@ function useGoDownFromSearchInput() {
     if (isSearchMode) {
       return focusFirstVisibleEmoji(BodyRef.current);
     }
+
     return focusCategoryNavigation();
   }, [BodyRef, focusCategoryNavigation, isSearchMode]);
 }
+
 function useGoUpFromBody() {
   var focusSearchInput = useFocusSearchInput();
   var focusCategoryNavigation = useFocusCategoryNavigation();
@@ -19359,26 +19766,35 @@ 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();
@@ -19386,9 +19802,11 @@ 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();
@@ -19397,10 +19815,11 @@ 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;
 }
 
@@ -19408,13 +19827,17 @@ 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);
@@ -19422,6 +19845,7 @@ function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   preloadedEmojs.add(unified);
 }
 var preloadedEmojs = /*#__PURE__*/new Set();
+
 function preloadImage(url) {
   var image = new Image();
   image.src = url;
@@ -19435,21 +19859,27 @@ 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);
       }
@@ -19461,8 +19891,10 @@ 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();
@@ -19472,11 +19904,12 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   return React.createElement("aside", {
-    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),
+    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),
     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)',
@@ -19492,7 +19925,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$8 = /*#__PURE__*/stylesheet.create({
+var styles$6 = /*#__PURE__*/stylesheet.create({
   main: {
     '.': ['epr-main', ClassNames.emojiPicker],
     position: 'relative',
@@ -19518,12 +19951,15 @@ var styles$8 = /*#__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',
@@ -19532,24 +19968,30 @@ var styles$8 = /*#__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',
@@ -19557,12 +19999,14 @@ var styles$8 = /*#__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)',
@@ -19594,10 +20038,12 @@ var styles$8 = /*#__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;
@@ -19605,46 +20051,56 @@ 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,