emoji-picker-react 4.0.0-rc.20 → 4.0.0-rc.21

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

@@ -15291,9 +15291,99 @@ function useActiveCategoryScrollDetection(bodyRef) {
   }, [bodyRef, setActiveCategory]);
 }
 
-function lastElementChild(element) {
-  if (!element) return null;
-  return element.lastElementChild;
+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.floor((elementTop - parentTop) / elementHeight) - 1;
+}
+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 elementTop - parentTop + elementHeight < parentHeight;
+}
+
+function getRowElements(elements, row, elementsInRow) {
+  if (row === -1) {
+    var lastRow = Math.floor(elements.length / 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;
+
+  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
+
+  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
+
+  return nextRowElements[index] || nextRowElements[nextRowElements.length - 1] || null;
+}
+function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
+  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) {
+    var elementTop = element.getBoundingClientRect().top;
+    var elementBottom = element.getBoundingClientRect().bottom;
+    return elementTop >= parentTop && elementTop <= parentBottom || elementBottom >= parentTop && elementBottom <= parentBottom;
+  });
+  return visibleElements || null;
+}
+function hasNextElementSibling(element) {
+  return !!element.nextElementSibling;
 }
 
 var EmojiButtonSelector = "button" + /*#__PURE__*/asSelectors(ClassNames.emoji);
@@ -15395,7 +15485,10 @@ function allVisibleEmojis(parent) {
 }
 function lastVisibleEmoji(element) {
   if (!element) return null;
-  var last = lastElementChild(element);
+  var allEmojis = allVisibleEmojis(element);
+
+  var _allEmojis$slice = allEmojis.slice(-1),
+      last = _allEmojis$slice[0];
 
   if (!last) {
     return null;
@@ -15438,8 +15531,8 @@ function firstVisibleEmoji(parent) {
     return null;
   }
 
-  var emoji = parent.querySelector(VisibleEmojiSelector);
-  return emoji;
+  var allEmojis = allVisibleEmojis(parent);
+  return firstVisibleElementInContainer(parent, allEmojis);
 }
 function prevCategory(element) {
   var category = closestCategory(element);
@@ -15803,14 +15896,29 @@ function useClearSearch() {
     setSearchTerm('');
   };
 }
+function useAppendSearch() {
+  var SearchInputRef = useSearchInputRef();
+
+  var _useSearchTermState2 = useSearchTermState(),
+      setSearchTerm = _useSearchTermState2[1];
+
+  return function appendSearch(str) {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = SearchInputRef.current.value + str;
+      setSearchTerm(SearchInputRef.current.value);
+    }
+
+    setSearchTerm(str);
+  };
+}
 function useFilter() {
   var SearchInputRef = useSearchInputRef();
   var filterRef = useFilterRef();
   var setFilterRef = useSetFilterRef();
 
-  var _useSearchTermState2 = useSearchTermState(),
-      searchTerm = _useSearchTermState2[0],
-      setSearchTerm = _useSearchTermState2[1];
+  var _useSearchTermState3 = useSearchTermState(),
+      searchTerm = _useSearchTermState3[0],
+      setSearchTerm = _useSearchTermState3[1];
 
   var PickerMainRef = usePickerMainRef();
   return {
@@ -15893,8 +16001,8 @@ function useIsEmojiFiltered() {
   var _useFilterRef = useFilterRef(),
       filter = _useFilterRef.current;
 
-  var _useSearchTermState3 = useSearchTermState(),
-      searchTerm = _useSearchTermState3[0];
+  var _useSearchTermState4 = useSearchTermState(),
+      searchTerm = _useSearchTermState4[0];
 
   return function (unified) {
     return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
@@ -16046,7 +16154,7 @@ function EmojiImg(_ref3) {
   }
 }
 
-var css_248z$1 = ".EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}.EmojiPickerReact.epr-search-active li.epr-emoji-category>.epr-emoji-category-label{opacity:.4;position:relative}.EmojiPickerReact li.epr-emoji-category{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;padding:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:after{content:\"\";display:inline-block;flex:1}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}";
+var css_248z$1 = ".EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;padding:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}.EmojiPickerReact.epr-search-active li.epr-emoji-category>.epr-emoji-category-label{opacity:.4;position:relative}";
 styleInject(css_248z$1);
 
 function EmojiCategory(_ref) {
@@ -16063,7 +16171,9 @@ function EmojiCategory(_ref) {
     "data-name": category
   }, createElement("div", {
     className: "epr-emoji-category-label"
-  }, categoryName), children);
+  }, categoryName), createElement("div", {
+    className: "epr-emoji-category-content"
+  }, children));
 }
 
 function Suggested(_ref) {
@@ -16352,6 +16462,9 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
     }
 
     var bodyRef = BodyRef.current;
+    bodyRef == null ? void 0 : bodyRef.addEventListener('keydown', onEscape, {
+      passive: true
+    });
     bodyRef == null ? void 0 : bodyRef.addEventListener('mouseover', onMouseOver, {
       passive: true
     });
@@ -16381,15 +16494,30 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       });
     }
 
-    function onLeave() {
+    function onLeave(e) {
+      if (e) {
+        var button = buttonFromTarget(e.target);
+
+        if (button) {
+          return;
+        }
+      }
+
       setPreviewEmoji(null);
     }
 
+    function onEscape(e) {
+      if (e.key === 'Escape') {
+        setPreviewEmoji(null);
+      }
+    }
+
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseout', onLeave);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('focus', onEnter, true);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('blur', onLeave, true);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('keydown', onEscape);
     };
   }, [BodyRef, allow, setPreviewEmoji]);
 
@@ -16620,108 +16748,17 @@ function useIsSearchMode() {
   return !!searchTerm;
 }
 
-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.floor((elementTop - parentTop) / elementHeight) - 1;
-}
-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 elementTop - parentTop + elementHeight < parentHeight;
-}
-
-function getRowElements(elements, row, elementsInRow) {
-  if (row === -1) {
-    var lastRow = Math.floor(elements.length / 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;
-
-  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
-
-  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
-
-  return nextRowElements[index] || nextRowElements[nextRowElements.length - 1] || null;
-}
-function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
-  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) {
-    var elementTop = element.getBoundingClientRect().top;
-    var elementBottom = element.getBoundingClientRect().bottom;
-    return elementTop >= parentTop && elementTop <= parentBottom || elementBottom >= parentTop && elementBottom <= parentBottom;
-  });
-  return visibleElements || null;
-}
-function hasNextElementSibling(element) {
-  return !!element.nextElementSibling;
-}
-
 function getActiveElement() {
   return document.activeElement;
 }
 
 function focusFirstVisibleEmoji(parent) {
-  var allEmojis = allVisibleEmojis(parent);
-  focusElement(firstVisibleElementInContainer(parent, allEmojis));
+  focusElement(firstVisibleEmoji(parent));
+}
+function focusAndClickFirstVisibleEmoji(parent) {
+  var firstEmoji = firstVisibleEmoji(parent);
+  focusElement(firstEmoji);
+  firstEmoji == null ? void 0 : firstEmoji.click();
 }
 function focusLastVisibleEmoji(parent) {
   focusElement(lastVisibleEmoji(parent));
@@ -16857,6 +16894,7 @@ var KeyboardEvents;
   KeyboardEvents["ArrowLeft"] = "ArrowLeft";
   KeyboardEvents["ArrowRight"] = "ArrowRight";
   KeyboardEvents["Escape"] = "Escape";
+  KeyboardEvents["Enter"] = "Enter";
 })(KeyboardEvents || (KeyboardEvents = {}));
 
 function useKeyboardNavigation() {
@@ -16878,7 +16916,7 @@ function usePickerMainKeyboardEvents() {
     return function onKeyDown(event) {
       var key = event.key;
 
-      if (key === 'Escape') {
+      if (key === KeyboardEvents.Escape) {
         event.preventDefault();
         clearSearch();
         closeAllOpenToggles();
@@ -16904,6 +16942,7 @@ function usePickerMainKeyboardEvents() {
 function useSearchInputKeyboardEvents() {
   var focusSkinTonePicker = useFocusSkinTonePicker();
   var PickerMainRef = usePickerMainRef();
+  var BodyRef = useBodyRef();
   var SearchInputRef = useSearchInputRef();
 
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
@@ -16925,9 +16964,14 @@ function useSearchInputKeyboardEvents() {
           event.preventDefault();
           goDownFromSearchInput();
           break;
+
+        case KeyboardEvents.Enter:
+          event.preventDefault();
+          focusAndClickFirstVisibleEmoji(BodyRef.current);
+          break;
       }
     };
-  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState]);
+  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef]);
   useEffect(function () {
     var current = SearchInputRef.current;
 
@@ -16952,6 +16996,7 @@ function useSkinTonePickerKeyboardEvents() {
       isOpen = _useSkinToneFanOpenSt2[0],
       setIsOpen = _useSkinToneFanOpenSt2[1];
 
+  var onType = useOnType();
   var onKeyDown = useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
@@ -16986,9 +17031,13 @@ function useSkinTonePickerKeyboardEvents() {
 
           goDownFromSearchInput();
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput]);
+  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]);
   useEffect(function () {
     var current = SkinTonePickerRef.current;
 
@@ -17007,6 +17056,7 @@ function useCategoryNavigationKeyboardEvents() {
   var focusSearchInput = useFocusSearchInput();
   var CategoryNavigationRef = useCategoryNavigationRef();
   var BodyRef = useBodyRef();
+  var onType = useOnType();
   var onKeyDown = useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
@@ -17031,9 +17081,13 @@ function useCategoryNavigationKeyboardEvents() {
           event.preventDefault();
           focusFirstVisibleEmoji(BodyRef.current);
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [BodyRef, focusSearchInput]);
+  }, [BodyRef, focusSearchInput, onType]);
   useEffect(function () {
     var current = CategoryNavigationRef.current;
 
@@ -17051,6 +17105,7 @@ function useCategoryNavigationKeyboardEvents() {
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
+  var onType = useOnType();
   var onKeyDown = useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
@@ -17076,9 +17131,13 @@ function useBodyKeyboardEvents() {
           event.preventDefault();
           focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [goUpFromBody]);
+  }, [goUpFromBody, onType]);
   useEffect(function () {
     var current = BodyRef.current;
 
@@ -17143,6 +17202,33 @@ function focusPrevSkinTone() {
   focusPrevElementSibling(currentSkinTone);
 }
 
+function useOnType() {
+  var appendSearch = useAppendSearch();
+  var focusSearchInput = useFocusSearchInput();
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  return function onType(event) {
+    var key = event.key;
+
+    if (hasModifier(event)) {
+      return;
+    }
+
+    if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
+      event.preventDefault();
+      closeAllOpenToggles();
+      focusSearchInput();
+      appendSearch(key);
+    }
+  };
+}
+
+function hasModifier(event) {
+  var metaKey = event.metaKey,
+      ctrlKey = event.ctrlKey,
+      altKey = event.altKey;
+  return metaKey || ctrlKey || altKey;
+}
+
 var css_248z$b = "aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;height:var(--epr-picker-height);position:relative;width:var(--epr-picker-width)}";
 styleInject(css_248z$b);
 
@@ -17165,7 +17251,7 @@ function PickerRootElement(_ref2) {
   }, children);
 }
 
-var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-width:350px;--epr-picker-height:450px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--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);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:55px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--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);--epr-category-padding:0 var(--epr-horizontal-padding);--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;--epr-emoji-size:30px;--epr-emoji-padding:5px;--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);--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}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button{background:none;border:0;cursor:pointer;outline:none}";
+var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-width:350px;--epr-picker-height:450px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--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);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:55px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--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);--epr-category-padding:0 var(--epr-horizontal-padding);--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;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--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);--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}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button{background:none;border:0;cursor:pointer;outline:none}";
 styleInject(css_248z$c);
 
 function EmojiPicker(props) {