emoji-picker-react 4.6.15 → 4.7.0

package/dist/emoji-picker-react.esm.js

@@ -1,38 +1,6 @@
-import React__default, { useState, useEffect, createElement, useRef, createContext, createRef, useContext, useMemo, useCallback, Fragment, memo, Component } from 'react';
+import React__default, { useState, useEffect, createElement, createContext, useContext, useRef, useMemo, useCallback, createRef, Fragment, memo, Component } from 'react';
 import { createSheet, cx } from 'flairup';
 
-var ClassNames;
-(function (ClassNames) {
-  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
-  ClassNames["searchActive"] = "epr-search-active";
-  ClassNames["hidden"] = "epr-hidden";
-  ClassNames["visible"] = "epr-visible";
-  ClassNames["active"] = "epr-active";
-  ClassNames["emoji"] = "epr-emoji";
-  ClassNames["category"] = "epr-emoji-category";
-  ClassNames["label"] = "epr-emoji-category-label";
-  ClassNames["categoryContent"] = "epr-emoji-category-content";
-  ClassNames["emojiHasVariations"] = "epr-emoji-has-variations";
-  ClassNames["scrollBody"] = "epr-body";
-  ClassNames["emojiList"] = "epr-emoji-list";
-  ClassNames["external"] = "__EmojiPicker__";
-  ClassNames["emojiPicker"] = "EmojiPickerReact";
-  ClassNames["open"] = "epr-open";
-  ClassNames["vertical"] = "epr-vertical";
-  ClassNames["horizontal"] = "epr-horizontal";
-  ClassNames["variationPicker"] = "epr-emoji-variation-picker";
-  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('');
-}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -103,6 +71,38 @@ 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.");
 }
 
+var ClassNames;
+(function (ClassNames) {
+  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
+  ClassNames["searchActive"] = "epr-search-active";
+  ClassNames["hidden"] = "epr-hidden";
+  ClassNames["visible"] = "epr-visible";
+  ClassNames["active"] = "epr-active";
+  ClassNames["emoji"] = "epr-emoji";
+  ClassNames["category"] = "epr-emoji-category";
+  ClassNames["label"] = "epr-emoji-category-label";
+  ClassNames["categoryContent"] = "epr-emoji-category-content";
+  ClassNames["emojiHasVariations"] = "epr-emoji-has-variations";
+  ClassNames["scrollBody"] = "epr-body";
+  ClassNames["emojiList"] = "epr-emoji-list";
+  ClassNames["external"] = "__EmojiPicker__";
+  ClassNames["emojiPicker"] = "EmojiPickerReact";
+  ClassNames["open"] = "epr-open";
+  ClassNames["vertical"] = "epr-vertical";
+  ClassNames["horizontal"] = "epr-horizontal";
+  ClassNames["variationPicker"] = "epr-emoji-variation-picker";
+  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('');
+}
+
 function useIsMounted() {
   var _React$useState = useState(false),
     isMounted = _React$useState[0],
@@ -118,7 +118,8 @@ var hidden = {
   display: 'none',
   opacity: '0',
   pointerEvents: 'none',
-  visibility: 'hidden'
+  visibility: 'hidden',
+  overflow: 'hidden'
 };
 var commonStyles = /*#__PURE__*/stylesheet.create({
   hidden: /*#__PURE__*/_extends({
@@ -154,6 +155,18 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
       visibleOnSearchOnly: hidden
     }
   },
+  hiddenOnReactions: {
+    transition: 'all 0.5s ease-in-out'
+  },
+  '.epr-reactions': {
+    hiddenOnReactions: {
+      height: '0px',
+      width: '0px',
+      opacity: '0',
+      pointerEvents: 'none',
+      overflow: 'hidden'
+    }
+  },
   '.EmojiPickerReact:not(.epr-search-active)': {
     categoryBtn: {
       ':hover': {
@@ -172,93 +185,8 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
   }
 });
 
-function focusElement(element) {
-  if (!element) {
-    return;
-  }
-  requestAnimationFrame(function () {
-    element.focus();
-  });
-}
-function focusPrevElementSibling(element) {
-  if (!element) return;
-  var prev = element.previousElementSibling;
-  focusElement(prev);
-}
-function focusNextElementSibling(element) {
-  if (!element) return;
-  var next = element.nextElementSibling;
-  focusElement(next);
-}
-function focusFirstElementChild(element) {
-  if (!element) return;
-  var first = element.firstElementChild;
-  focusElement(first);
-}
-
-function ElementRefContextProvider(_ref) {
-  var children = _ref.children;
-  var PickerMainRef = useRef(null);
-  var AnchoredEmojiRef = useRef(null);
-  var BodyRef = useRef(null);
-  var SearchInputRef = useRef(null);
-  var SkinTonePickerRef = useRef(null);
-  var CategoryNavigationRef = useRef(null);
-  var VariationPickerRef = useRef(null);
-  return createElement(ElementRefContext.Provider, {
-    value: {
-      AnchoredEmojiRef: AnchoredEmojiRef,
-      BodyRef: BodyRef,
-      CategoryNavigationRef: CategoryNavigationRef,
-      PickerMainRef: PickerMainRef,
-      SearchInputRef: SearchInputRef,
-      SkinTonePickerRef: SkinTonePickerRef,
-      VariationPickerRef: VariationPickerRef
-    }
-  }, children);
-}
-var ElementRefContext = /*#__PURE__*/createContext({
-  AnchoredEmojiRef: /*#__PURE__*/createRef(),
-  BodyRef: /*#__PURE__*/createRef(),
-  CategoryNavigationRef: /*#__PURE__*/createRef(),
-  PickerMainRef: /*#__PURE__*/createRef(),
-  SearchInputRef: /*#__PURE__*/createRef(),
-  SkinTonePickerRef: /*#__PURE__*/createRef(),
-  VariationPickerRef: /*#__PURE__*/createRef()
-});
-function useElementRef() {
-  return useContext(ElementRefContext);
-}
-function usePickerMainRef() {
-  return useElementRef()['PickerMainRef'];
-}
-function useAnchoredEmojiRef() {
-  return useElementRef()['AnchoredEmojiRef'];
-}
-function useSetAnchoredEmojiRef() {
-  var AnchoredEmojiRef = useAnchoredEmojiRef();
-  return function (target) {
-    if (target === null && AnchoredEmojiRef.current !== null) {
-      focusElement(AnchoredEmojiRef.current);
-    }
-    AnchoredEmojiRef.current = target;
-  };
-}
-function useBodyRef() {
-  return useElementRef()['BodyRef'];
-}
-function useSearchInputRef() {
-  return useElementRef()['SearchInputRef'];
-}
-function useSkinTonePickerRef() {
-  return useElementRef()['SkinTonePickerRef'];
-}
-function useCategoryNavigationRef() {
-  return useElementRef()['CategoryNavigationRef'];
-}
-function useVariationPickerRef() {
-  return useElementRef()['VariationPickerRef'];
-}
+var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
+];
 
 var SuggestionMode;
 (function (SuggestionMode) {
@@ -16909,7 +16837,9 @@ function basePickerConfig() {
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
     unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
-    width: 350
+    width: 350,
+    reactionsDefaultOpen: false,
+    reactions: DEFAULT_REACTIONS
   };
 }
 var basePreviewConfig = {
@@ -17044,29 +16974,39 @@ function useStyleConfig() {
     width: getDimension(width)
   }, style);
 }
-function useEmojiVersionConfig() {
+function useReactionsOpenConfig() {
   var _usePickerConfig14 = usePickerConfig(),
-    emojiVersion = _usePickerConfig14.emojiVersion;
+    reactionsDefaultOpen = _usePickerConfig14.reactionsDefaultOpen;
+  return reactionsDefaultOpen;
+}
+function useEmojiVersionConfig() {
+  var _usePickerConfig15 = usePickerConfig(),
+    emojiVersion = _usePickerConfig15.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    searchDisabled = _usePickerConfig15.searchDisabled;
+  var _usePickerConfig16 = usePickerConfig(),
+    searchDisabled = _usePickerConfig16.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
+  var _usePickerConfig17 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig17.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig17 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig17.unicodeToHide;
+  var _usePickerConfig18 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig18.unicodeToHide;
   return unicodeToHide;
 }
+function useReactionsConfig() {
+  var _usePickerConfig19 = usePickerConfig(),
+    reactions = _usePickerConfig19.reactions;
+  return reactions;
+}
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig18.getEmojiUrl;
+  var _usePickerConfig20 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig20.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -17081,270 +17021,50 @@ function useSearchResultsConfig(searchResultsCount) {
   return SEARCH_RESULTS_NO_RESULTS_FOUND;
 }
 
-function useDebouncedState(initialValue, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
-  var _useState = useState(initialValue),
-    state = _useState[0],
-    setState = _useState[1];
-  var timer = 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);
-    });
+function elementCountInRow(parent, element) {
+  if (!parent || !element) {
+    return 0;
   }
-  return [state, debouncedSetState];
+  var parentWidth = parent.getBoundingClientRect().width;
+  var elementWidth = element.getBoundingClientRect().width;
+  return Math.floor(parentWidth / elementWidth);
 }
-
-function useIsUnicodeHidden() {
-  var unicodeToHide = useUnicodeToHide();
-  return function (emojiUnified) {
-    return unicodeToHide.has(emojiUnified);
-  };
+function elementIndexInRow(parent, element) {
+  if (!parent || !element) {
+    return 0;
+  }
+  var elementWidth = element.getBoundingClientRect().width;
+  var elementLeft = element.getBoundingClientRect().left;
+  var parentLeft = parent.getBoundingClientRect().left;
+  return Math.floor((elementLeft - parentLeft) / elementWidth);
 }
-
-function useDisallowedEmojis() {
-  var DisallowedEmojisRef = useRef({});
-  var emojiVersionConfig = useEmojiVersionConfig();
-  return 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]);
+function rowNumber(parent, element) {
+  if (!parent || !element) {
+    return 0;
+  }
+  var elementHeight = element.getBoundingClientRect().height;
+  var elementTop = element.getBoundingClientRect().top;
+  var parentTop = parent.getBoundingClientRect().top;
+  return Math.round((elementTop - parentTop) / elementHeight);
 }
-function useIsEmojiDisallowed() {
-  var disallowedEmojis = useDisallowedEmojis();
-  var isUnicodeHidden = useIsUnicodeHidden();
-  return function isEmojiDisallowed(emoji) {
-    var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
-    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
-  };
+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 addedInNewerVersion(emoji, supportedLevel) {
-  return addedIn(emoji) > supportedLevel;
-}
-
-function useMarkInitialLoad(dispatch) {
-  useEffect(function () {
-    dispatch(true);
-  }, [dispatch]);
-}
-
-function PickerContextProvider(_ref) {
-  var children = _ref.children;
-  var disallowedEmojis = useDisallowedEmojis();
-  var defaultSkinTone = useDefaultSkinToneConfig();
-  // Initialize the filter with the inititial dictionary
-  var filterRef = useRef(alphaNumericEmojiIndex);
-  var disallowClickRef = useRef(false);
-  var disallowMouseRef = useRef(false);
-  var disallowedEmojisRef = useRef(disallowedEmojis);
-  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
-  var searchTerm = useDebouncedState('', 100);
-  var skinToneFanOpenState = useState(false);
-  var activeSkinTone = useState(defaultSkinTone);
-  var activeCategoryState = useState(null);
-  var emojisThatFailedToLoadState = useState(new Set());
-  var emojiVariationPickerState = useState(null);
-  var _useState = useState(false),
-    isPastInitialLoad = _useState[0],
-    setIsPastInitialLoad = _useState[1];
-  useMarkInitialLoad(setIsPastInitialLoad);
-  return createElement(PickerContext.Provider, {
-    value: {
-      activeCategoryState: activeCategoryState,
-      activeSkinTone: activeSkinTone,
-      disallowClickRef: disallowClickRef,
-      disallowMouseRef: disallowMouseRef,
-      disallowedEmojisRef: disallowedEmojisRef,
-      emojiVariationPickerState: emojiVariationPickerState,
-      emojisThatFailedToLoadState: emojisThatFailedToLoadState,
-      filterRef: filterRef,
-      isPastInitialLoad: isPastInitialLoad,
-      searchTerm: searchTerm,
-      skinToneFanOpenState: skinToneFanOpenState,
-      suggestedUpdateState: suggestedUpdateState
-    }
-  }, children);
-}
-var PickerContext = /*#__PURE__*/createContext({
-  activeCategoryState: [null, function () {}],
-  activeSkinTone: [SkinTones.NEUTRAL, function () {}],
-  disallowClickRef: {
-    current: false
-  },
-  disallowMouseRef: {
-    current: false
-  },
-  disallowedEmojisRef: {
-    current: {}
-  },
-  emojiVariationPickerState: [null, function () {}],
-  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
-  filterRef: {
-    current: {}
-  },
-  isPastInitialLoad: true,
-  searchTerm: ['', function () {
-    return new Promise(function () {
-      return undefined;
-    });
-  }],
-  skinToneFanOpenState: [false, function () {}],
-  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}]
-});
-function useFilterRef() {
-  var _React$useContext = useContext(PickerContext),
-    filterRef = _React$useContext.filterRef;
-  return filterRef;
-}
-function useDisallowClickRef() {
-  var _React$useContext2 = useContext(PickerContext),
-    disallowClickRef = _React$useContext2.disallowClickRef;
-  return disallowClickRef;
-}
-function useDisallowMouseRef() {
-  var _React$useContext3 = useContext(PickerContext),
-    disallowMouseRef = _React$useContext3.disallowMouseRef;
-  return disallowMouseRef;
-}
-function useSearchTermState() {
-  var _React$useContext4 = useContext(PickerContext),
-    searchTerm = _React$useContext4.searchTerm;
-  return searchTerm;
-}
-function useActiveSkinToneState() {
-  var _React$useContext5 = useContext(PickerContext),
-    activeSkinTone = _React$useContext5.activeSkinTone;
-  return activeSkinTone;
-}
-function useEmojisThatFailedToLoadState() {
-  var _React$useContext6 = useContext(PickerContext),
-    emojisThatFailedToLoadState = _React$useContext6.emojisThatFailedToLoadState;
-  return emojisThatFailedToLoadState;
-}
-function useIsPastInitialLoad() {
-  var _React$useContext7 = useContext(PickerContext),
-    isPastInitialLoad = _React$useContext7.isPastInitialLoad;
-  return isPastInitialLoad;
-}
-function useEmojiVariationPickerState() {
-  var _React$useContext8 = useContext(PickerContext),
-    emojiVariationPickerState = _React$useContext8.emojiVariationPickerState;
-  return emojiVariationPickerState;
-}
-function useSkinToneFanOpenState() {
-  var _React$useContext9 = useContext(PickerContext),
-    skinToneFanOpenState = _React$useContext9.skinToneFanOpenState;
-  return skinToneFanOpenState;
-}
-function useUpdateSuggested() {
-  var _React$useContext11 = useContext(PickerContext),
-    suggestedUpdateState = _React$useContext11.suggestedUpdateState;
-  var suggestedUpdated = suggestedUpdateState[0],
-    setsuggestedUpdate = suggestedUpdateState[1];
-  return [suggestedUpdated, function updateSuggested() {
-    setsuggestedUpdate(Date.now());
-  }];
-}
-
-function useDisallowMouseMove() {
-  var DisallowMouseRef = useDisallowMouseRef();
-  return function disallowMouseMove() {
-    DisallowMouseRef.current = true;
-  };
-}
-function useAllowMouseMove() {
-  var DisallowMouseRef = useDisallowMouseRef();
-  return function allowMouseMove() {
-    DisallowMouseRef.current = false;
-  };
-}
-function useIsMouseDisallowed() {
-  var DisallowMouseRef = useDisallowMouseRef();
-  return function isMouseDisallowed() {
-    return DisallowMouseRef.current;
-  };
-}
-function useOnMouseMove() {
-  var BodyRef = useBodyRef();
-  var allowMouseMove = useAllowMouseMove();
-  var isMouseDisallowed = useIsMouseDisallowed();
-  useEffect(function () {
-    var bodyRef = BodyRef.current;
-    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);
-    };
-  }, [BodyRef, allowMouseMove, isMouseDisallowed]);
-}
-
-function elementCountInRow(parent, element) {
-  if (!parent || !element) {
-    return 0;
-  }
-  var parentWidth = parent.getBoundingClientRect().width;
-  var elementWidth = element.getBoundingClientRect().width;
-  return Math.floor(parentWidth / elementWidth);
-}
-function elementIndexInRow(parent, element) {
-  if (!parent || !element) {
-    return 0;
-  }
-  var elementWidth = element.getBoundingClientRect().width;
-  var elementLeft = element.getBoundingClientRect().left;
-  var parentLeft = parent.getBoundingClientRect().left;
-  return Math.floor((elementLeft - parentLeft) / elementWidth);
-}
-function rowNumber(parent, element) {
-  if (!parent || !element) {
-    return 0;
-  }
-  var elementHeight = element.getBoundingClientRect().height;
-  var elementTop = element.getBoundingClientRect().top;
-  var parentTop = parent.getBoundingClientRect().top;
-  return Math.round((elementTop - parentTop) / elementHeight);
-}
-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);
-    var firstElementIndex = lastRow * elementsInRow;
-    var lastElementIndex = elements.length - 1;
-    return elements.slice(firstElementIndex, lastElementIndex + 1);
-  }
-  return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
+function getRowElements(elements, row, elementsInRow) {
+  if (row === -1) {
+    var lastRow = Math.floor((elements.length - 1) / elementsInRow);
+    var firstElementIndex = lastRow * 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;
@@ -17579,42 +17299,233 @@ function closestCategoryContent(element) {
   return element.closest(asSelectors(ClassNames.categoryContent));
 }
 
-function parseNativeEmoji(unified) {
-  return unified.split('-').map(function (hex) {
-    return String.fromCodePoint(parseInt(hex, 16));
-  }).join('');
+function useDebouncedState(initialValue, delay) {
+  if (delay === void 0) {
+    delay = 0;
+  }
+  var _useState = useState(initialValue),
+    state = _useState[0],
+    setState = _useState[1];
+  var timer = 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];
 }
 
-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 === SuggestionMode.FREQUENT) {
-      return recent.sort(function (a, b) {
-        return b.count - a.count;
-      });
-    }
-    return recent;
-  } catch (_unused) {
-    return [];
-  }
+function useIsUnicodeHidden() {
+  var unicodeToHide = useUnicodeToHide();
+  return function (emojiUnified) {
+    return unicodeToHide.has(emojiUnified);
+  };
 }
-function setSuggested(emoji, skinTone) {
-  var recent = getSuggested();
-  var unified = emojiUnified(emoji, skinTone);
-  var originalUnified = emojiUnified(emoji);
-  var existing = recent.find(function (_ref) {
-    var u = _ref.unified;
-    return u === unified;
-  });
-  var nextList;
-  if (existing) {
-    nextList = [existing].concat(recent.filter(function (i) {
-      return i !== existing;
+
+function useDisallowedEmojis() {
+  var DisallowedEmojisRef = useRef({});
+  var emojiVersionConfig = useEmojiVersionConfig();
+  return 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]);
+}
+function useIsEmojiDisallowed() {
+  var disallowedEmojis = useDisallowedEmojis();
+  var isUnicodeHidden = useIsUnicodeHidden();
+  return function isEmojiDisallowed(emoji) {
+    var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
+    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
+  };
+}
+function addedInNewerVersion(emoji, supportedLevel) {
+  return addedIn(emoji) > supportedLevel;
+}
+
+function useMarkInitialLoad(dispatch) {
+  useEffect(function () {
+    dispatch(true);
+  }, [dispatch]);
+}
+
+function PickerContextProvider(_ref) {
+  var children = _ref.children;
+  var disallowedEmojis = useDisallowedEmojis();
+  var defaultSkinTone = useDefaultSkinToneConfig();
+  var reactionsDefaultOpen = useReactionsOpenConfig();
+  // Initialize the filter with the inititial dictionary
+  var filterRef = useRef(alphaNumericEmojiIndex);
+  var disallowClickRef = useRef(false);
+  var disallowMouseRef = useRef(false);
+  var disallowedEmojisRef = useRef(disallowedEmojis);
+  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
+  var searchTerm = useDebouncedState('', 100);
+  var skinToneFanOpenState = useState(false);
+  var activeSkinTone = useState(defaultSkinTone);
+  var activeCategoryState = useState(null);
+  var emojisThatFailedToLoadState = useState(new Set());
+  var emojiVariationPickerState = useState(null);
+  var reactionsModeState = useState(reactionsDefaultOpen);
+  var _useState = useState(false),
+    isPastInitialLoad = _useState[0],
+    setIsPastInitialLoad = _useState[1];
+  useMarkInitialLoad(setIsPastInitialLoad);
+  return createElement(PickerContext.Provider, {
+    value: {
+      activeCategoryState: activeCategoryState,
+      activeSkinTone: activeSkinTone,
+      disallowClickRef: disallowClickRef,
+      disallowMouseRef: disallowMouseRef,
+      disallowedEmojisRef: disallowedEmojisRef,
+      emojiVariationPickerState: emojiVariationPickerState,
+      emojisThatFailedToLoadState: emojisThatFailedToLoadState,
+      filterRef: filterRef,
+      isPastInitialLoad: isPastInitialLoad,
+      searchTerm: searchTerm,
+      skinToneFanOpenState: skinToneFanOpenState,
+      suggestedUpdateState: suggestedUpdateState,
+      reactionsModeState: reactionsModeState
+    }
+  }, children);
+}
+var PickerContext = /*#__PURE__*/createContext({
+  activeCategoryState: [null, function () {}],
+  activeSkinTone: [SkinTones.NEUTRAL, function () {}],
+  disallowClickRef: {
+    current: false
+  },
+  disallowMouseRef: {
+    current: false
+  },
+  disallowedEmojisRef: {
+    current: {}
+  },
+  emojiVariationPickerState: [null, function () {}],
+  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
+  filterRef: {
+    current: {}
+  },
+  isPastInitialLoad: true,
+  searchTerm: ['', function () {
+    return new Promise(function () {
+      return undefined;
+    });
+  }],
+  skinToneFanOpenState: [false, function () {}],
+  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
+  reactionsModeState: [false, function () {}]
+});
+function useFilterRef() {
+  var _React$useContext = useContext(PickerContext),
+    filterRef = _React$useContext.filterRef;
+  return filterRef;
+}
+function useDisallowClickRef() {
+  var _React$useContext2 = useContext(PickerContext),
+    disallowClickRef = _React$useContext2.disallowClickRef;
+  return disallowClickRef;
+}
+function useDisallowMouseRef() {
+  var _React$useContext3 = useContext(PickerContext),
+    disallowMouseRef = _React$useContext3.disallowMouseRef;
+  return disallowMouseRef;
+}
+function useReactionsModeState() {
+  var _React$useContext4 = useContext(PickerContext),
+    reactionsModeState = _React$useContext4.reactionsModeState;
+  return reactionsModeState;
+}
+function useSearchTermState() {
+  var _React$useContext5 = useContext(PickerContext),
+    searchTerm = _React$useContext5.searchTerm;
+  return searchTerm;
+}
+function useActiveSkinToneState() {
+  var _React$useContext6 = useContext(PickerContext),
+    activeSkinTone = _React$useContext6.activeSkinTone;
+  return activeSkinTone;
+}
+function useEmojisThatFailedToLoadState() {
+  var _React$useContext7 = useContext(PickerContext),
+    emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
+  return emojisThatFailedToLoadState;
+}
+function useIsPastInitialLoad() {
+  var _React$useContext8 = useContext(PickerContext),
+    isPastInitialLoad = _React$useContext8.isPastInitialLoad;
+  return isPastInitialLoad;
+}
+function useEmojiVariationPickerState() {
+  var _React$useContext9 = useContext(PickerContext),
+    emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
+  return emojiVariationPickerState;
+}
+function useSkinToneFanOpenState() {
+  var _React$useContext10 = useContext(PickerContext),
+    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
+  return skinToneFanOpenState;
+}
+function useUpdateSuggested() {
+  var _React$useContext12 = useContext(PickerContext),
+    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+  var suggestedUpdated = suggestedUpdateState[0],
+    setsuggestedUpdate = suggestedUpdateState[1];
+  return [suggestedUpdated, function updateSuggested() {
+    setsuggestedUpdate(Date.now());
+  }];
+}
+
+function parseNativeEmoji(unified) {
+  return unified.split('-').map(function (hex) {
+    return String.fromCodePoint(parseInt(hex, 16));
+  }).join('');
+}
+
+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 === SuggestionMode.FREQUENT) {
+      return recent.sort(function (a, b) {
+        return b.count - a.count;
+      });
+    }
+    return recent;
+  } catch (_unused) {
+    return [];
+  }
+}
+function setSuggested(emoji, skinTone) {
+  var recent = getSuggested();
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
+  var existing = recent.find(function (_ref) {
+    var u = _ref.unified;
+    return u === unified;
+  });
+  var nextList;
+  if (existing) {
+    nextList = [existing].concat(recent.filter(function (i) {
+      return i !== existing;
     }));
   } else {
     existing = {
@@ -17669,46 +17580,140 @@ function useHasOpenToggles() {
   };
 }
 
-function useSetVariationPicker() {
-  var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
-  var _useEmojiVariationPic = useEmojiVariationPickerState(),
-    setEmojiVariationPicker = _useEmojiVariationPic[1];
-  return function setVariationPicker(element) {
-    var _emojiFromElement = emojiFromElement(element),
-      emoji = _emojiFromElement[0];
-    if (emoji) {
-      setAnchoredEmojiRef(element);
-      setEmojiVariationPicker(emoji);
-    }
-  };
+function focusElement(element) {
+  if (!element) {
+    return;
+  }
+  requestAnimationFrame(function () {
+    element.focus();
+  });
+}
+function focusPrevElementSibling(element) {
+  if (!element) return;
+  var prev = element.previousElementSibling;
+  focusElement(prev);
+}
+function focusNextElementSibling(element) {
+  if (!element) return;
+  var next = element.nextElementSibling;
+  focusElement(next);
+}
+function focusFirstElementChild(element) {
+  if (!element) return;
+  var first = element.firstElementChild;
+  focusElement(first);
 }
 
-function useMouseDownHandlers(BodyRef) {
-  var mouseDownTimerRef = useRef();
-  var setVariationPicker = useSetVariationPicker();
-  var disallowClickRef = useDisallowClickRef();
-  var _useEmojiVariationPic = useEmojiVariationPickerState(),
-    setEmojiVariationPicker = _useEmojiVariationPic[1];
-  var closeAllOpenToggles = useCloseAllOpenToggles();
-  var _useActiveSkinToneSta = useActiveSkinToneState(),
-    activeSkinTone = _useActiveSkinToneSta[0];
-  var onEmojiClick = useOnEmojiClickConfig();
-  var _useUpdateSuggested = useUpdateSuggested(),
-    updateSuggested = _useUpdateSuggested[1];
-  var getEmojiUrl = useGetEmojiUrlConfig();
-  var activeEmojiStyle = useEmojiStyleConfig();
-  var onClick = useCallback(function onClick(event) {
-    if (disallowClickRef.current) {
-      return;
-    }
-    closeAllOpenToggles();
-    var _emojiFromEvent = emojiFromEvent(event),
-      emoji = _emojiFromEvent[0],
-      unified = _emojiFromEvent[1];
-    if (!emoji || !unified) {
-      return;
+function ElementRefContextProvider(_ref) {
+  var children = _ref.children;
+  var PickerMainRef = useRef(null);
+  var AnchoredEmojiRef = useRef(null);
+  var BodyRef = useRef(null);
+  var SearchInputRef = useRef(null);
+  var SkinTonePickerRef = useRef(null);
+  var CategoryNavigationRef = useRef(null);
+  var VariationPickerRef = useRef(null);
+  var ReactionsRef = useRef(null);
+  return createElement(ElementRefContext.Provider, {
+    value: {
+      AnchoredEmojiRef: AnchoredEmojiRef,
+      BodyRef: BodyRef,
+      CategoryNavigationRef: CategoryNavigationRef,
+      PickerMainRef: PickerMainRef,
+      SearchInputRef: SearchInputRef,
+      SkinTonePickerRef: SkinTonePickerRef,
+      VariationPickerRef: VariationPickerRef,
+      ReactionsRef: ReactionsRef
     }
-    var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
+  }, children);
+}
+var ElementRefContext = /*#__PURE__*/createContext({
+  AnchoredEmojiRef: /*#__PURE__*/createRef(),
+  BodyRef: /*#__PURE__*/createRef(),
+  CategoryNavigationRef: /*#__PURE__*/createRef(),
+  PickerMainRef: /*#__PURE__*/createRef(),
+  SearchInputRef: /*#__PURE__*/createRef(),
+  SkinTonePickerRef: /*#__PURE__*/createRef(),
+  VariationPickerRef: /*#__PURE__*/createRef(),
+  ReactionsRef: /*#__PURE__*/createRef()
+});
+function useElementRef() {
+  return useContext(ElementRefContext);
+}
+function usePickerMainRef() {
+  return useElementRef()['PickerMainRef'];
+}
+function useAnchoredEmojiRef() {
+  return useElementRef()['AnchoredEmojiRef'];
+}
+function useSetAnchoredEmojiRef() {
+  var AnchoredEmojiRef = useAnchoredEmojiRef();
+  return function (target) {
+    if (target === null && AnchoredEmojiRef.current !== null) {
+      focusElement(AnchoredEmojiRef.current);
+    }
+    AnchoredEmojiRef.current = target;
+  };
+}
+function useBodyRef() {
+  return useElementRef()['BodyRef'];
+}
+function useReactionsRef() {
+  return useElementRef()['ReactionsRef'];
+}
+function useSearchInputRef() {
+  return useElementRef()['SearchInputRef'];
+}
+function useSkinTonePickerRef() {
+  return useElementRef()['SkinTonePickerRef'];
+}
+function useCategoryNavigationRef() {
+  return useElementRef()['CategoryNavigationRef'];
+}
+function useVariationPickerRef() {
+  return useElementRef()['VariationPickerRef'];
+}
+
+function useSetVariationPicker() {
+  var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+  var _useEmojiVariationPic = useEmojiVariationPickerState(),
+    setEmojiVariationPicker = _useEmojiVariationPic[1];
+  return function setVariationPicker(element) {
+    var _emojiFromElement = emojiFromElement(element),
+      emoji = _emojiFromElement[0];
+    if (emoji) {
+      setAnchoredEmojiRef(element);
+      setEmojiVariationPicker(emoji);
+    }
+  };
+}
+
+function useMouseDownHandlers(BodyRef) {
+  var mouseDownTimerRef = useRef();
+  var setVariationPicker = useSetVariationPicker();
+  var disallowClickRef = useDisallowClickRef();
+  var _useEmojiVariationPic = useEmojiVariationPickerState(),
+    setEmojiVariationPicker = _useEmojiVariationPic[1];
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  var _useActiveSkinToneSta = useActiveSkinToneState(),
+    activeSkinTone = _useActiveSkinToneSta[0];
+  var onEmojiClick = useOnEmojiClickConfig();
+  var _useUpdateSuggested = useUpdateSuggested(),
+    updateSuggested = _useUpdateSuggested[1];
+  var getEmojiUrl = useGetEmojiUrlConfig();
+  var activeEmojiStyle = useEmojiStyleConfig();
+  var onClick = useCallback(function onClick(event) {
+    if (disallowClickRef.current) {
+      return;
+    }
+    closeAllOpenToggles();
+    var _emojiFromEvent = emojiFromEvent(event),
+      emoji = _emojiFromEvent[0],
+      unified = _emojiFromEvent[1];
+    if (!emoji || !unified) {
+      return;
+    }
+    var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setSuggested(emoji, skinToneToUse);
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
@@ -17809,6 +17814,391 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
   };
 }
 
+function Button(props) {
+  return createElement("button", Object.assign({
+    type: "button"
+  }, props, {
+    className: cx(styles.button, props.className)
+  }), props.children);
+}
+var styles = /*#__PURE__*/stylesheet.create({
+  button: {
+    '.': 'epr-btn',
+    cursor: 'pointer',
+    border: '0',
+    background: 'none',
+    outline: 'none'
+  }
+});
+
+function ClickableEmojiButton(_ref) {
+  var _cx;
+  var emojiNames = _ref.emojiNames,
+    unified = _ref.unified,
+    hidden = _ref.hidden,
+    hiddenOnSearch = _ref.hiddenOnSearch,
+    _ref$showVariations = _ref.showVariations,
+    showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
+    hasVariations = _ref.hasVariations,
+    children = _ref.children,
+    _ref$round = _ref.round,
+    round = _ref$round === void 0 ? false : _ref$round;
+  return createElement(Button, {
+    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round),
+    "data-unified": unified,
+    "aria-label": emojiNames[0],
+    "data-full-name": emojiNames
+  }, children);
+}
+var styles$1 = /*#__PURE__*/stylesheet.create({
+  emoji: {
+    '.': ClassNames.emoji,
+    position: 'relative',
+    width: 'var(--epr-emoji-fullsize)',
+    height: 'var(--epr-emoji-fullsize)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: 'var(--epr-emoji-fullsize)',
+    maxHeight: 'var(--epr-emoji-fullsize)',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    transition: 'background-color 0.2s',
+    ':hover': {
+      backgroundColor: 'var(--epr-emoji-hover-color)'
+    },
+    ':focus': {
+      backgroundColor: 'var(--epr-focus-bg-color)'
+    }
+  },
+  round: {
+    borderRadius: '50%'
+  },
+  hasVariations: {
+    '.': ClassNames.emojiHasVariations,
+    ':after': {
+      content: '',
+      display: 'block',
+      width: '0',
+      height: '0',
+      right: '0px',
+      bottom: '1px',
+      position: 'absolute',
+      borderLeft: '4px solid transparent',
+      borderRight: '4px solid transparent',
+      transform: 'rotate(135deg)',
+      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
+      zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
+    },
+    ':hover:after': {
+      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
+    }
+  }
+});
+
+var emojiStyles = /*#__PURE__*/stylesheet.create({
+  external: {
+    '.': ClassNames.external,
+    fontSize: '0'
+  },
+  common: {
+    alignSelf: 'center',
+    justifySelf: 'center',
+    display: 'block'
+  }
+});
+
+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,
+    className = _ref.className;
+  return createElement("img", {
+    src: imgUrl,
+    alt: emojiName,
+    className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common, className),
+    loading: lazyLoad ? 'lazy' : 'eager',
+    onError: onError,
+    style: style
+  });
+}
+var styles$2 = /*#__PURE__*/stylesheet.create({
+  emojiImag: {
+    '.': 'epr-emoji-img',
+    maxWidth: 'var(--epr-emoji-fullsize)',
+    maxHeight: 'var(--epr-emoji-fullsize)',
+    minWidth: 'var(--epr-emoji-fullsize)',
+    minHeight: 'var(--epr-emoji-fullsize)',
+    padding: 'var(--epr-emoji-padding)'
+  }
+});
+
+function NativeEmoji(_ref) {
+  var unified = _ref.unified,
+    style = _ref.style,
+    className = _ref.className;
+  return createElement("span", {
+    className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
+    "data-unified": unified,
+    style: style
+  }, parseNativeEmoji(unified));
+}
+var styles$3 = /*#__PURE__*/stylesheet.create({
+  nativeEmoji: {
+    '.': 'epr-emoji-native',
+    fontFamily: '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
+    position: 'relative',
+    lineHeight: '100%',
+    fontSize: 'var(--epr-emoji-size)',
+    textAlign: 'center',
+    alignSelf: 'center',
+    justifySelf: 'center',
+    letterSpacing: '0',
+    padding: 'var(--epr-emoji-padding)'
+  }
+});
+
+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,
+    className = _ref.className;
+  var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
+    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 createElement(EmojiImg, {
+      style: style,
+      emojiName: unified,
+      emojiStyle: EmojiStyle.NATIVE,
+      lazyLoad: lazyLoad,
+      imgUrl: emojiToRender.imgUrl,
+      onError: onError,
+      className: className
+    });
+  }
+  return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
+    unified: unified,
+    style: style,
+    className: className
+  }) : createElement(EmojiImg, {
+    style: style,
+    emojiName: emojiName(emojiToRender),
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad,
+    imgUrl: getEmojiUrl(unified, emojiStyle),
+    onError: onError,
+    className: className
+  }));
+  function onError() {
+    setEmojisThatFailedToLoad(function (prev) {
+      return new Set(prev).add(unified);
+    });
+  }
+}
+
+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,
+    _ref$round = _ref.round,
+    round = _ref$round === void 0 ? false : _ref$round;
+  var hasVariations = emojiHasVariations(emoji);
+  return createElement(ClickableEmojiButton, {
+    hasVariations: hasVariations,
+    showVariations: showVariations,
+    hidden: hidden,
+    hiddenOnSearch: hiddenOnSearch,
+    emojiNames: emojiNames(emoji),
+    unified: unified,
+    round: round
+  }, createElement(ViewOnlyEmoji, {
+    unified: unified,
+    emoji: emoji,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
+  }));
+}
+
+var Plus = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNS43LDEwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsMTAuOSw2LjEsMTEsNi4zLDExaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjRWNi43YzAtMC4zLTAuMi0wLjUtMC41LTAuNQoJQzkuOCw2LDkuNiw2LjIsOS42LDYuNXYzLjRINi4yQzUuOSw5LjksNS43LDEwLjEsNS43LDEwLjRMNS43LDEwLjR6Ii8+CjxwYXRoIGZpbGw9IiMzMzcxQjciIGQ9Ik01LjcsMzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDMxLDYuMywzMWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuMgoJQzUuOSwyOS45LDUuNywzMC4xLDUuNywzMC40TDUuNywzMC40eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNS43LDUwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsNTAuOSw2LjEsNTEsNi4zLDUxaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjR2LTMuNGMwLTAuMy0wLjItMC41LTAuNS0wLjUKCXMtMC41LDAuMi0wLjUsMC41djMuNEg2LjJDNS45LDQ5LjksNS43LDUwLjEsNS43LDUwLjRMNS43LDUwLjR6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik01LjcsNzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDcxLDYuMyw3MWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuNAoJQzUuOSw2OS45LDUuNyw3MC4xLDUuNyw3MC40TDUuNyw3MC40eiIvPgo8L3N2Zz4=';
+
+function BtnPlus() {
+  var _useReactionsModeStat = useReactionsModeState(),
+    setReactionsMode = _useReactionsModeStat[1];
+  return createElement(Button, {
+    "aria-label": "Show all Emojis",
+    title: "Show all Emojis",
+    tabIndex: 0,
+    className: cx(styles$4.plusSign),
+    onClick: function onClick() {
+      return setReactionsMode(false);
+    }
+  });
+}
+var styles$4 = /*#__PURE__*/stylesheet.create({
+  plusSign: {
+    fontSize: '20px',
+    padding: '18px',
+    color: 'var(--epr-text-color)',
+    borderRadius: '50%',
+    textAlign: 'center',
+    lineHeight: '100%',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'background-color 0.1s ease-in-out',
+    ':after': {
+      content: '',
+      minWidth: '20px',
+      minHeight: '20px',
+      backgroundImage: "url(" + Plus + ")",
+      backgroundColor: 'transparent',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '20px',
+      backgroundPositionY: '0'
+    },
+    ':hover': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-20px'
+      }
+    },
+    ':focus': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-40px'
+      }
+    }
+  },
+  '.epr-dark-theme': {
+    plusSign: {
+      ':after': {
+        backgroundPositionY: '-40px'
+      },
+      ':hover:after': {
+        backgroundPositionY: '-60px'
+      }
+    }
+  },
+  '.epr-auto-theme': {
+    plusSign: {
+      '@media (prefers-color-scheme: dark)': {
+        ':after': {
+          backgroundPositionY: '-40px'
+        },
+        ':hover:after': {
+          backgroundPositionY: '-60px'
+        }
+      }
+    }
+  }
+});
+
+function Reactions() {
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsOpen = _useReactionsModeStat[0];
+  var ReactionsRef = useReactionsRef();
+  var reactions = useReactionsConfig();
+  useMouseDownHandlers(ReactionsRef);
+  var emojiStyle = useEmojiStyleConfig();
+  if (!reactionsOpen) {
+    return null;
+  }
+  return createElement("ul", {
+    className: cx(styles$5.list, !reactionsOpen && commonStyles.hidden),
+    ref: ReactionsRef
+  }, reactions.map(function (reaction) {
+    return createElement("li", {
+      key: reaction
+    }, createElement(ClickableEmoji, {
+      emoji: emojiByUnified(reaction),
+      emojiStyle: emojiStyle,
+      unified: reaction,
+      showVariations: false,
+      round: true
+    }));
+  }), createElement("li", null, createElement(BtnPlus, null)));
+}
+var styles$5 = /*#__PURE__*/stylesheet.create({
+  list: {
+    listStyle: 'none',
+    margin: '0',
+    padding: '0 5px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%'
+  }
+});
+
+function useDisallowMouseMove() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function disallowMouseMove() {
+    DisallowMouseRef.current = true;
+  };
+}
+function useAllowMouseMove() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function allowMouseMove() {
+    DisallowMouseRef.current = false;
+  };
+}
+function useIsMouseDisallowed() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function isMouseDisallowed() {
+    return DisallowMouseRef.current;
+  };
+}
+function useOnMouseMove() {
+  var BodyRef = useBodyRef();
+  var allowMouseMove = useAllowMouseMove();
+  var isMouseDisallowed = useIsMouseDisallowed();
+  useEffect(function () {
+    var bodyRef = BodyRef.current;
+    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);
+    };
+  }, [BodyRef, allowMouseMove, isMouseDisallowed]);
+}
+
 function useOnScroll(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
   useEffect(function () {
@@ -18052,228 +18442,6 @@ function useIsEmojiHidden() {
   };
 }
 
-function Button(props) {
-  return createElement("button", Object.assign({
-    type: "button"
-  }, props, {
-    className: cx(styles.button, props.className)
-  }), props.children);
-}
-var styles = /*#__PURE__*/stylesheet.create({
-  button: {
-    '.': 'epr-btn',
-    cursor: 'pointer',
-    border: '0',
-    background: 'none',
-    outline: 'none'
-  }
-});
-
-function ClickableEmojiButton(_ref) {
-  var _cx;
-  var emojiNames = _ref.emojiNames,
-    unified = _ref.unified,
-    hidden = _ref.hidden,
-    hiddenOnSearch = _ref.hiddenOnSearch,
-    _ref$showVariations = _ref.showVariations,
-    showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
-    hasVariations = _ref.hasVariations,
-    children = _ref.children;
-  return createElement(Button, {
-    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations),
-    "data-unified": unified,
-    "aria-label": emojiNames[0],
-    "data-full-name": emojiNames
-  }, children);
-}
-var styles$1 = /*#__PURE__*/stylesheet.create({
-  emoji: {
-    '.': ClassNames.emoji,
-    position: 'relative',
-    width: 'var(--epr-emoji-fullsize)',
-    height: 'var(--epr-emoji-fullsize)',
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    maxWidth: 'var(--epr-emoji-fullsize)',
-    maxHeight: 'var(--epr-emoji-fullsize)',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    transition: 'background-color 0.2s',
-    ':hover': {
-      backgroundColor: 'var(--epr-emoji-hover-color)'
-    },
-    ':focus': {
-      backgroundColor: 'var(--epr-focus-bg-color)'
-    }
-  },
-  hasVariations: {
-    '.': ClassNames.emojiHasVariations,
-    ':after': {
-      content: '',
-      display: 'block',
-      width: '0',
-      height: '0',
-      right: '0px',
-      bottom: '1px',
-      position: 'absolute',
-      borderLeft: '4px solid transparent',
-      borderRight: '4px solid transparent',
-      transform: 'rotate(135deg)',
-      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color)',
-      zIndex: 'var(--epr-emoji-variations-indictator-z-index)'
-    },
-    ':hover:after': {
-      borderBottom: '4px solid var(--epr-emoji-variation-indicator-color-hover)'
-    }
-  }
-});
-
-var emojiStyles = /*#__PURE__*/stylesheet.create({
-  external: {
-    '.': ClassNames.external,
-    fontSize: '0'
-  },
-  common: {
-    alignSelf: 'center',
-    justifySelf: 'center',
-    display: 'block'
-  }
-});
-
-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,
-    className = _ref.className;
-  return createElement("img", {
-    src: imgUrl,
-    alt: emojiName,
-    className: cx(styles$2.emojiImag, emojiStyles.external, emojiStyles.common, className),
-    loading: lazyLoad ? 'lazy' : 'eager',
-    onError: onError,
-    style: style
-  });
-}
-var styles$2 = /*#__PURE__*/stylesheet.create({
-  emojiImag: {
-    '.': 'epr-emoji-img',
-    maxWidth: 'var(--epr-emoji-fullsize)',
-    maxHeight: 'var(--epr-emoji-fullsize)',
-    minWidth: 'var(--epr-emoji-fullsize)',
-    minHeight: 'var(--epr-emoji-fullsize)',
-    padding: 'var(--epr-emoji-padding)'
-  }
-});
-
-function NativeEmoji(_ref) {
-  var unified = _ref.unified,
-    style = _ref.style,
-    className = _ref.className;
-  return createElement("span", {
-    className: cx(styles$3.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
-    "data-unified": unified,
-    style: style
-  }, parseNativeEmoji(unified));
-}
-var styles$3 = /*#__PURE__*/stylesheet.create({
-  nativeEmoji: {
-    '.': 'epr-emoji-native',
-    fontFamily: '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"!important',
-    position: 'relative',
-    lineHeight: '100%',
-    fontSize: 'var(--epr-emoji-size)',
-    textAlign: 'center',
-    alignSelf: 'center',
-    justifySelf: 'center',
-    letterSpacing: '0',
-    padding: 'var(--epr-emoji-padding)'
-  }
-});
-
-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,
-    className = _ref.className;
-  var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
-    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 createElement(EmojiImg, {
-      style: style,
-      emojiName: unified,
-      emojiStyle: EmojiStyle.NATIVE,
-      lazyLoad: lazyLoad,
-      imgUrl: emojiToRender.imgUrl,
-      onError: onError,
-      className: className
-    });
-  }
-  return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
-    unified: unified,
-    style: style,
-    className: className
-  }) : createElement(EmojiImg, {
-    style: style,
-    emojiName: emojiName(emojiToRender),
-    emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad,
-    imgUrl: getEmojiUrl(unified, emojiStyle),
-    onError: onError,
-    className: className
-  }));
-  function onError() {
-    setEmojisThatFailedToLoad(function (prev) {
-      return new Set(prev).add(unified);
-    });
-  }
-}
-
-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;
-  var hasVariations = emojiHasVariations(emoji);
-  return createElement(ClickableEmojiButton, {
-    hasVariations: hasVariations,
-    showVariations: showVariations,
-    hidden: hidden,
-    hiddenOnSearch: hiddenOnSearch,
-    emojiNames: emojiNames(emoji),
-    unified: unified
-  }, createElement(ViewOnlyEmoji, {
-    unified: unified,
-    emoji: emoji,
-    size: size,
-    emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
-  }));
-}
-
 function EmojiCategory(_ref) {
   var categoryConfig = _ref.categoryConfig,
     children = _ref.children,
@@ -18282,16 +18450,16 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return createElement("li", {
-    className: cx(styles$4.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
+    className: cx(styles$6.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, createElement("h2", {
-    className: cx(styles$4.label)
+    className: cx(styles$6.label)
   }, categoryName), createElement("div", {
-    className: cx(styles$4.categoryContent)
+    className: cx(styles$6.categoryContent)
   }, children));
 }
-var styles$4 = /*#__PURE__*/stylesheet.create({
+var styles$6 = /*#__PURE__*/stylesheet.create({
   category: {
     '.': ClassNames.category,
     ':not(:has(.epr-visible))': {
@@ -18369,7 +18537,7 @@ function EmojiList() {
   var categories = useCategoriesConfig();
   var renderdCategoriesCountRef = useRef(0);
   return createElement("ul", {
-    className: cx(styles$5.emojiList)
+    className: cx(styles$7.emojiList)
   }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     if (category === Categories.SUGGESTED) {
@@ -18438,7 +18606,7 @@ function RenderCategory(_ref) {
     hidden: hiddenCounter === emojis.length
   }, emojis);
 }
-var styles$5 = /*#__PURE__*/stylesheet.create({
+var styles$7 = /*#__PURE__*/stylesheet.create({
   emojiList: {
     '.': ClassNames.emojiList,
     listStyle: 'none',
@@ -18577,7 +18745,7 @@ function EmojiVariationPicker() {
   }
   return createElement("div", {
     ref: VariationPickerRef,
-    className: cx(styles$6.variationPicker, getMenuDirection() === Direction.Down && styles$6.pointingUp, visible && styles$6.visible),
+    className: cx(styles$8.variationPicker, getMenuDirection() === Direction.Down && styles$8.pointingUp, visible && styles$8.visible),
     style: {
       top: top
     }
@@ -18591,7 +18759,7 @@ function EmojiVariationPicker() {
       getEmojiUrl: getEmojiUrl
     });
   }) : null, createElement("div", {
-    className: cx(styles$6.pointer),
+    className: cx(styles$8.pointer),
     style: pointerStyle
   }));
 }
@@ -18647,7 +18815,7 @@ function useVariationPickerTop(VariationPickerRef) {
     return emojiOffsetTop - height;
   }
 }
-var styles$6 = /*#__PURE__*/stylesheet.create({
+var styles$8 = /*#__PURE__*/stylesheet.create({
   variationPicker: {
     '.': ClassNames.variationPicker,
     position: 'absolute',
@@ -18720,11 +18888,11 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return createElement("div", {
-    className: cx(styles$7.body),
+    className: cx(styles$9.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
   }, createElement(EmojiVariationPicker, null), createElement(EmojiList, null));
 }
-var styles$7 = /*#__PURE__*/stylesheet.create({
+var styles$9 = /*#__PURE__*/stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
     flex: '1',
@@ -18824,10 +18992,10 @@ function Flex(_ref) {
     direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return createElement("div", {
     style: _extends({}, style),
-    className: cx(styles$8.flex, className, styles$8[direction])
+    className: cx(styles$a.flex, className, styles$a[direction])
   }, children);
 }
-var styles$8 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
+var styles$a = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
   flex: {
     display: 'flex'
   }
@@ -18883,13 +19051,13 @@ function BtnSkinToneVariation(_ref) {
   return createElement(Button, {
     style: style,
     onClick: onClick,
-    className: cx("epr-tone-" + skinToneVariation, styles$9.tone, !isOpen && styles$9.closedTone, isActive && styles$9.active),
+    className: cx("epr-tone-" + skinToneVariation, styles$b.tone, !isOpen && styles$b.closedTone, isActive && styles$b.active),
     tabIndex: isOpen ? 0 : -1,
     "aria-pressed": isActive,
     "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
   });
 }
-var styles$9 = /*#__PURE__*/stylesheet.create({
+var styles$b = /*#__PURE__*/stylesheet.create({
   closedTone: {
     opacity: '0',
     zIndex: '0'
@@ -18965,7 +19133,7 @@ function SkinTonePicker(_ref) {
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
   return createElement(Relative, {
-    className: cx(styles$a.skinTones, vertical && styles$a.vertical, isOpen && styles$a.open, vertical && isOpen && styles$a.verticalShadow),
+    className: cx(styles$c.skinTones, vertical && styles$c.vertical, isOpen && styles$c.open, vertical && isOpen && styles$c.verticalShadow),
     style: vertical ? {
       flexBasis: expandedSize,
       height: expandedSize
@@ -18973,7 +19141,7 @@ function SkinTonePicker(_ref) {
       flexBasis: expandedSize
     }
   }, createElement("div", {
-    className: cx(styles$a.select),
+    className: cx(styles$c.select),
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var active = skinToneVariation === activeSkinTone;
@@ -19002,7 +19170,7 @@ var SkinTonePickerDirection;
   SkinTonePickerDirection["VERTICAL"] = "epr-vertical";
   SkinTonePickerDirection["HORIZONTAL"] = "epr-horizontal";
 })(SkinTonePickerDirection || (SkinTonePickerDirection = {}));
-var styles$a = /*#__PURE__*/stylesheet.create({
+var styles$c = /*#__PURE__*/stylesheet.create({
   skinTones: {
     '.': 'epr-skin-tones',
     '--': {
@@ -19068,7 +19236,7 @@ function Preview() {
     return null;
   }
   return createElement(Flex, {
-    className: cx(styles$b.preview)
+    className: cx(styles$d.preview, commonInteractionStyles.hiddenOnReactions)
   }, createElement(PreviewBody, null), createElement(Space, null), isSkinToneInPreview ? createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
@@ -19097,20 +19265,20 @@ function PreviewBody() {
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: cx(styles$b.emoji)
+      className: cx(styles$d.emoji)
     }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: cx(styles$b.emoji)
+      className: cx(styles$d.emoji)
     }) : null), createElement("div", {
-      className: cx(styles$b.label)
+      className: cx(styles$d.label)
     }, show ? emojiName(emoji) : defaultText));
   }
 }
-var styles$b = /*#__PURE__*/stylesheet.create({
+var styles$d = /*#__PURE__*/stylesheet.create({
   preview: {
     alignItems: 'center',
     borderTop: '1px solid var(--epr-preview-border-color)',
@@ -19214,7 +19382,7 @@ function CategoryButton(_ref) {
     onClick = _ref.onClick;
   return createElement(Button, {
     tabIndex: allowNavigation ? 0 : -1,
-    className: cx(styles$c.catBtn, commonInteractionStyles.categoryBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+    className: cx(styles$e.catBtn, commonInteractionStyles.categoryBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
     onClick: onClick,
     "aria-label": categoryNameFromCategoryConfig(categoryConfig),
     "aria-selected": isActiveCategory,
@@ -19236,7 +19404,7 @@ var DarkInactivePosition = {
     }
   }
 };
-var styles$c = /*#__PURE__*/stylesheet.create({
+var styles$e = /*#__PURE__*/stylesheet.create({
   catBtn: {
     '.': 'epr-cat-btn',
     display: 'inline-block',
@@ -19311,7 +19479,7 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return createElement("div", {
-    className: cx(styles$d.nav),
+    className: cx(styles$f.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
@@ -19336,7 +19504,7 @@ function CategoryNavigation() {
     });
   }));
 }
-var styles$d = /*#__PURE__*/stylesheet.create({
+var styles$f = /*#__PURE__*/stylesheet.create({
   nav: {
     '.': 'epr-category-nav',
     display: 'flex',
@@ -19365,12 +19533,12 @@ var SVGTimes = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz
 function BtnClearSearch() {
   var clearSearch = useClearSearch();
   return createElement(Button, {
-    className: cx(styles$e.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
+    className: cx(styles$g.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
     "aria-label": "Clear",
     title: "Clear"
   }, createElement("div", {
-    className: cx(styles$e.icnClearnSearch)
+    className: cx(styles$g.icnClearnSearch)
   }));
 }
 var HoverDark = {
@@ -19380,7 +19548,7 @@ var HoverDark = {
     }
   }
 };
-var styles$e = /*#__PURE__*/stylesheet.create({
+var styles$g = /*#__PURE__*/stylesheet.create({
   btnClearSearch: {
     '.': 'epr-btn-clear-search',
     position: 'absolute',
@@ -19453,10 +19621,10 @@ var SVGMagnifier = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG
 
 function IcnSearch() {
   return createElement("div", {
-    className: cx(styles$f.icnSearch)
+    className: cx(styles$h.icnSearch)
   });
 }
-var styles$f = /*#__PURE__*/stylesheet.create({
+var styles$h = /*#__PURE__*/stylesheet.create({
   icnSearch: {
     '.': 'epr-icn-search',
     content: '',
@@ -19492,7 +19660,7 @@ function SearchContainer() {
     return null;
   }
   return createElement(Flex, {
-    className: cx(styles$g.overlay)
+    className: cx(styles$i.overlay)
   }, createElement(Search, null), isSkinToneInSearch ? createElement(SkinTonePicker, null) : null);
 }
 function Search() {
@@ -19510,7 +19678,7 @@ function Search() {
   var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
   var value = input == null ? void 0 : input.value;
   return createElement(Relative, {
-    className: cx(styles$g.searchContainer)
+    className: cx(styles$i.searchContainer)
   }, createElement(CssSearch, {
     value: value
   }), createElement("input", {
@@ -19518,7 +19686,7 @@ function Search() {
     autoFocus: autoFocus,
     "aria-label": 'Type to search for an emoji',
     onFocus: closeAllOpenToggles,
-    className: cx(styles$g.search),
+    className: cx(styles$i.search),
     type: "text",
     "aria-controls": "epr-search-id",
     placeholder: placeholder,
@@ -19532,13 +19700,13 @@ function Search() {
     ref: SearchInputRef
   }), searchTerm ? createElement("div", {
     role: "status",
-    className: cx('epr-status-search-results', styles$g.visuallyHidden),
+    className: cx('epr-status-search-results', styles$i.visuallyHidden),
     "aria-live": "polite",
     id: "epr-search-id",
     "aria-atomic": "true"
   }, statusSearchResults) : null, createElement(IcnSearch, null), createElement(BtnClearSearch, null));
 }
-var styles$g = /*#__PURE__*/stylesheet.create({
+var styles$i = /*#__PURE__*/stylesheet.create({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'
@@ -19640,7 +19808,7 @@ var styles$g = /*#__PURE__*/stylesheet.create({
 
 function Header() {
   return createElement(Relative, {
-    className: "epr-header"
+    className: cx('epr-header', commonInteractionStyles.hiddenOnReactions)
   }, createElement(SearchContainer, null), createElement(CategoryNavigation, null));
 }
 
@@ -20045,6 +20213,7 @@ function useOnFocus() {
   }, [BodyRef, emojiStyle, getEmojiUrl]);
 }
 
+var _excluded$1 = ["width", "height"];
 function PickerMain(_ref) {
   var children = _ref.children;
   return createElement(PickerContextProvider, null, createElement(PickerStyleTag, null), createElement(PickerRootElement, null, children));
@@ -20052,6 +20221,8 @@ function PickerMain(_ref) {
 function PickerRootElement(_ref2) {
   var _cx;
   var children = _ref2.children;
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsMode = _useReactionsModeStat[0];
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
@@ -20059,10 +20230,17 @@ function PickerRootElement(_ref2) {
   var style = useStyleConfig();
   useKeyboardNavigation();
   useOnFocus();
+  var _ref3 = style || {},
+    width = _ref3.width,
+    height = _ref3.height,
+    styleProps = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
   return createElement("aside", {
-    className: cx(styles$h.main, styles$h.baseVariables, theme === Theme.DARK && styles$h.darkTheme, theme === Theme.AUTO && styles$h.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), className),
+    className: cx(styles$j.main, styles$j.baseVariables, theme === Theme.DARK && styles$j.darkTheme, theme === Theme.AUTO && styles$j.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles$j.reactionsMenu, className),
     ref: PickerMainRef,
-    style: style
+    style: _extends({}, styleProps, !reactionsMode && {
+      height: height,
+      width: width
+    })
   }, children);
 }
 var DarkTheme = {
@@ -20075,12 +20253,13 @@ var DarkTheme = {
   '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
   '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
   '--epr-bg-color': 'var(--epr-dark-bg-color)',
+  '--epr-reactions-bg-color': 'var(--epr-dark-reactions-bg-color)',
   '--epr-search-input-bg-color-active': 'var(--epr-dark-search-input-bg-color-active)',
   '--epr-emoji-variation-indicator-color': 'var(--epr-dark-emoji-variation-indicator-color)',
   '--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$h = /*#__PURE__*/stylesheet.create({
+var styles$j = /*#__PURE__*/stylesheet.create({
   main: {
     '.': ['epr-main', ClassNames.emojiPicker],
     position: 'relative',
@@ -20092,6 +20271,7 @@ var styles$h = /*#__PURE__*/stylesheet.create({
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
     overflow: 'hidden',
+    transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
     // @ts-expect-error - need to work on this
     '*': {
       boxSizing: 'border-box',
@@ -20107,6 +20287,7 @@ var styles$h = /*#__PURE__*/stylesheet.create({
       '--epr-search-input-bg-color': '#f6f6f6',
       '--epr-picker-border-color': '#e7e7e7',
       '--epr-bg-color': '#fff',
+      '--epr-reactions-bg-color': '#ffffff90',
       '--epr-category-icon-active-color': '#6aa8de',
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
       '--epr-horizontal-padding': '10px',
@@ -20167,6 +20348,7 @@ var styles$h = /*#__PURE__*/stylesheet.create({
       '--epr-dark-category-label-bg-color': '#222222e6',
       '--epr-dark-picker-border-color': '#151617',
       '--epr-dark-bg-color': '#222222',
+      '--epr-dark-reactions-bg-color': '#22222290',
       '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
       '--epr-dark-emoji-variation-indicator-color': '#444',
       '--epr-dark-category-icon-active-color': '#3271b7',
@@ -20182,18 +20364,42 @@ var styles$h = /*#__PURE__*/stylesheet.create({
   darkTheme: {
     '.': ClassNames.darkTheme,
     '--': DarkTheme
+  },
+  reactionsMenu: {
+    '.': 'epr-reactions',
+    height: '50px',
+    display: 'inline-flex',
+    backgroundColor: 'var(--epr-reactions-bg-color)',
+    // @ts-expect-error - need to work on this
+    backdropFilter: 'blur(8px)',
+    '--': {
+      '--epr-picker-border-radius': '50px'
+    }
   }
 });
 
 function EmojiPicker(props) {
-  return createElement(ElementRefContextProvider, null, createElement(PickerConfigProvider, Object.assign({}, props), createElement(PickerMain, null, createElement(Header, null), createElement(Body, null), createElement(Preview, null))));
+  return createElement(ElementRefContextProvider, null, createElement(PickerConfigProvider, Object.assign({}, props), createElement(PickerMain, null, createElement(ContentControl, null))));
+}
+function ContentControl() {
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsDefaultOpen = _useReactionsModeStat[0];
+  var _React$useState = useState(!reactionsDefaultOpen),
+    renderAll = _React$useState[0],
+    setRenderAll = _React$useState[1];
+  useEffect(function () {
+    if (!renderAll) {
+      setRenderAll(true);
+    }
+  }, []);
+  return createElement(Fragment, null, createElement(Reactions, null), renderAll ? createElement(Fragment, null, createElement(Header, null), createElement(Body, null), createElement(Preview, null)) : null);
 }
 // eslint-disable-next-line complexity
 var EmojiPickerReact = /*#__PURE__*/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;
+  return prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && 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;
 });
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {