emoji-picker-react 4.1.1 → 4.3.0

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

@@ -232,238 +232,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   Categories["FLAGS"] = "flags";
 })(exports.Categories || (exports.Categories = {}));
 
-var _configByCategory;
-var categoriesOrdered = [exports.Categories.SUGGESTED, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
-var SuggestedRecent = {
-  name: 'Recently Used',
-  category: exports.Categories.SUGGESTED
-};
-var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.SUGGESTED] = {
-  category: exports.Categories.SUGGESTED,
-  name: 'Frequently Used'
-}, _configByCategory[exports.Categories.SMILEYS_PEOPLE] = {
-  category: exports.Categories.SMILEYS_PEOPLE,
-  name: 'Smileys & People'
-}, _configByCategory[exports.Categories.ANIMALS_NATURE] = {
-  category: exports.Categories.ANIMALS_NATURE,
-  name: 'Animals & Nature'
-}, _configByCategory[exports.Categories.FOOD_DRINK] = {
-  category: exports.Categories.FOOD_DRINK,
-  name: 'Food & Drink'
-}, _configByCategory[exports.Categories.TRAVEL_PLACES] = {
-  category: exports.Categories.TRAVEL_PLACES,
-  name: 'Travel & Places'
-}, _configByCategory[exports.Categories.ACTIVITIES] = {
-  category: exports.Categories.ACTIVITIES,
-  name: 'Activities'
-}, _configByCategory[exports.Categories.OBJECTS] = {
-  category: exports.Categories.OBJECTS,
-  name: 'Objects'
-}, _configByCategory[exports.Categories.SYMBOLS] = {
-  category: exports.Categories.SYMBOLS,
-  name: 'Symbols'
-}, _configByCategory[exports.Categories.FLAGS] = {
-  category: exports.Categories.FLAGS,
-  name: 'Flags'
-}, _configByCategory);
-function baseCategoriesConfig(modifiers) {
-  return categoriesOrdered.map(function (category) {
-    return _extends({}, configByCategory[category], modifiers && modifiers[category] && modifiers[category]);
-  });
-}
-function categoryFromCategoryConfig(category) {
-  return category.category;
-}
-function categoryNameFromCategoryConfig(category) {
-  return category.name;
-}
-function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
-  var _userCategoriesConfig;
-
-  if (userCategoriesConfig === void 0) {
-    userCategoriesConfig = [];
-  }
-
-  if (modifiers === void 0) {
-    modifiers = {};
-  }
-
-  var extra = {};
-
-  if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
-    extra[exports.Categories.SUGGESTED] = SuggestedRecent;
-  }
-
-  var base = baseCategoriesConfig(extra);
-
-  if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
-    return base;
-  }
-
-  return userCategoriesConfig.map(function (category) {
-    if (typeof category === 'string') {
-      return getBaseConfigByCategory(category, extra[category]);
-    }
-
-    return _extends({}, getBaseConfigByCategory(category.category, extra[category.category]), category);
-  });
-}
-
-function getBaseConfigByCategory(category, modifier) {
-  if (modifier === void 0) {
-    modifier = {};
-  }
-
-  return Object.assign(configByCategory[category], modifier);
-}
-
-function mergeConfig(userConfig) {
-  var _userConfig$previewCo;
-
-  if (userConfig === void 0) {
-    userConfig = {};
-  }
-
-  var base = basePickerConfig();
-  var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
-  var config = Object.assign(base, userConfig);
-  var categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode
-  });
-  return _extends({}, config, {
-    categories: categories,
-    previewConfig: previewConfig
-  });
-}
-function basePickerConfig() {
-  return {
-    autoFocusSearch: true,
-    categories: baseCategoriesConfig(),
-    defaultSkinTone: exports.SkinTones.NEUTRAL,
-    emojiStyle: exports.EmojiStyle.APPLE,
-    emojiVersion: null,
-    height: 450,
-    lazyLoadEmojis: false,
-    onEmojiClick: function defaultOnClickHandler( // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    emoji, // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    event) {},
-    previewConfig: _extends({}, basePreviewConfig),
-    searchPlaceHolder: 'Search',
-    skinTonesDisabled: false,
-    suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
-    theme: exports.Theme.LIGHT,
-    width: 350
-  };
-}
-var basePreviewConfig = {
-  defaultEmoji: '1f60a',
-  defaultCaption: "What's your mood?",
-  showPreview: true
-};
-
-var _excluded = ["children"];
-var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
-function PickerConfigProvider(_ref) {
-  var children = _ref.children,
-      config = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return React.createElement(ConfigContext.Provider, {
-    value: mergeConfig(config)
-  }, children);
-}
-function usePickerConfig() {
-  return React.useContext(ConfigContext);
-}
-
-function useSearchPlaceHolderConfig() {
-  var _usePickerConfig = usePickerConfig(),
-      searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
-
-  return searchPlaceHolder;
-}
-function useDefaultSkinToneConfig() {
-  var _usePickerConfig2 = usePickerConfig(),
-      defaultSkinTone = _usePickerConfig2.defaultSkinTone;
-
-  return defaultSkinTone;
-}
-function useSkinTonesDisabledConfig() {
-  var _usePickerConfig3 = usePickerConfig(),
-      skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
-
-  return skinTonesDisabled;
-}
-function useEmojiStyleConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-      emojiStyle = _usePickerConfig4.emojiStyle;
-
-  return emojiStyle;
-}
-function useAutoFocusSearchConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-      autoFocusSearch = _usePickerConfig5.autoFocusSearch;
-
-  return autoFocusSearch;
-}
-function useCategoriesConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-      categories = _usePickerConfig6.categories;
-
-  return categories;
-}
-function useOnEmojiClickConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-      onEmojiClick = _usePickerConfig7.onEmojiClick;
-
-  return onEmojiClick;
-}
-function usePreviewConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-      previewConfig = _usePickerConfig8.previewConfig;
-
-  return previewConfig;
-}
-function useThemeConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-      theme = _usePickerConfig9.theme;
-
-  if (theme === exports.Theme.AUTO) {
-    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
-  }
-
-  return theme;
-}
-function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
-
-  return suggestedEmojisMode;
-}
-function useLazyLoadEmojisConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
-
-  return lazyLoadEmojis;
-}
-function usePickerSizeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-      height = _usePickerConfig12.height,
-      width = _usePickerConfig12.width;
-
-  return {
-    height: height,
-    width: width
-  };
-}
-function useEmojiVersionConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      emojiVersion = _usePickerConfig13.emojiVersion;
-
-  return emojiVersion;
-}
-
 var CDN_URL_APPLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
 var CDN_URL_FACEBOOK = 'https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/';
 var CDN_URL_TWITTER = 'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter/img/twitter/64/';
@@ -16866,8 +16634,9 @@ function emojisByCategory(category) {
 
   // @ts-ignore
   return (_emojis$category = emojis == null ? void 0 : emojis[category]) != null ? _emojis$category : [];
-}
-function emojiUrlByUnified(emojiStyle, unified) {
+} // WARNING: DO NOT USE DIRECTLY
+
+function emojiUrlByUnified(unified, emojiStyle) {
   return "" + cdnUrl(emojiStyle) + unified + ".png";
 }
 function emojiVariations(emoji) {
@@ -16910,6 +16679,249 @@ function activeVariationFromUnified(unified) {
   return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
 }
 
+var _configByCategory;
+var categoriesOrdered = [exports.Categories.SUGGESTED, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
+var SuggestedRecent = {
+  name: 'Recently Used',
+  category: exports.Categories.SUGGESTED
+};
+var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.SUGGESTED] = {
+  category: exports.Categories.SUGGESTED,
+  name: 'Frequently Used'
+}, _configByCategory[exports.Categories.SMILEYS_PEOPLE] = {
+  category: exports.Categories.SMILEYS_PEOPLE,
+  name: 'Smileys & People'
+}, _configByCategory[exports.Categories.ANIMALS_NATURE] = {
+  category: exports.Categories.ANIMALS_NATURE,
+  name: 'Animals & Nature'
+}, _configByCategory[exports.Categories.FOOD_DRINK] = {
+  category: exports.Categories.FOOD_DRINK,
+  name: 'Food & Drink'
+}, _configByCategory[exports.Categories.TRAVEL_PLACES] = {
+  category: exports.Categories.TRAVEL_PLACES,
+  name: 'Travel & Places'
+}, _configByCategory[exports.Categories.ACTIVITIES] = {
+  category: exports.Categories.ACTIVITIES,
+  name: 'Activities'
+}, _configByCategory[exports.Categories.OBJECTS] = {
+  category: exports.Categories.OBJECTS,
+  name: 'Objects'
+}, _configByCategory[exports.Categories.SYMBOLS] = {
+  category: exports.Categories.SYMBOLS,
+  name: 'Symbols'
+}, _configByCategory[exports.Categories.FLAGS] = {
+  category: exports.Categories.FLAGS,
+  name: 'Flags'
+}, _configByCategory);
+function baseCategoriesConfig(modifiers) {
+  return categoriesOrdered.map(function (category) {
+    return _extends({}, configByCategory[category], modifiers && modifiers[category] && modifiers[category]);
+  });
+}
+function categoryFromCategoryConfig(category) {
+  return category.category;
+}
+function categoryNameFromCategoryConfig(category) {
+  return category.name;
+}
+function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
+  var _userCategoriesConfig;
+
+  if (userCategoriesConfig === void 0) {
+    userCategoriesConfig = [];
+  }
+
+  if (modifiers === void 0) {
+    modifiers = {};
+  }
+
+  var extra = {};
+
+  if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
+    extra[exports.Categories.SUGGESTED] = SuggestedRecent;
+  }
+
+  var base = baseCategoriesConfig(extra);
+
+  if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
+    return base;
+  }
+
+  return userCategoriesConfig.map(function (category) {
+    if (typeof category === 'string') {
+      return getBaseConfigByCategory(category, extra[category]);
+    }
+
+    return _extends({}, getBaseConfigByCategory(category.category, extra[category.category]), category);
+  });
+}
+
+function getBaseConfigByCategory(category, modifier) {
+  if (modifier === void 0) {
+    modifier = {};
+  }
+
+  return Object.assign(configByCategory[category], modifier);
+}
+
+function mergeConfig(userConfig) {
+  var _userConfig$previewCo;
+
+  if (userConfig === void 0) {
+    userConfig = {};
+  }
+
+  var base = basePickerConfig();
+  var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
+  var config = Object.assign(base, userConfig);
+  var categories = mergeCategoriesConfig(userConfig.categories, {
+    suggestionMode: config.suggestedEmojisMode
+  });
+  return _extends({}, config, {
+    categories: categories,
+    previewConfig: previewConfig
+  });
+}
+function basePickerConfig() {
+  return {
+    autoFocusSearch: true,
+    categories: baseCategoriesConfig(),
+    defaultSkinTone: exports.SkinTones.NEUTRAL,
+    emojiStyle: exports.EmojiStyle.APPLE,
+    emojiVersion: null,
+    getEmojiUrl: emojiUrlByUnified,
+    height: 450,
+    lazyLoadEmojis: false,
+    onEmojiClick: function defaultOnClickHandler( // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    emoji, // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    event) {},
+    previewConfig: _extends({}, basePreviewConfig),
+    searchPlaceHolder: 'Search',
+    skinTonesDisabled: false,
+    suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
+    theme: exports.Theme.LIGHT,
+    width: 350
+  };
+}
+var basePreviewConfig = {
+  defaultEmoji: '1f60a',
+  defaultCaption: "What's your mood?",
+  showPreview: true
+};
+
+var _excluded = ["children"];
+var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
+function PickerConfigProvider(_ref) {
+  var children = _ref.children,
+      config = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return React.createElement(ConfigContext.Provider, {
+    value: mergeConfig(config)
+  }, children);
+}
+function usePickerConfig() {
+  return React.useContext(ConfigContext);
+}
+
+function useSearchPlaceHolderConfig() {
+  var _usePickerConfig = usePickerConfig(),
+      searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
+
+  return searchPlaceHolder;
+}
+function useDefaultSkinToneConfig() {
+  var _usePickerConfig2 = usePickerConfig(),
+      defaultSkinTone = _usePickerConfig2.defaultSkinTone;
+
+  return defaultSkinTone;
+}
+function useSkinTonesDisabledConfig() {
+  var _usePickerConfig3 = usePickerConfig(),
+      skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
+
+  return skinTonesDisabled;
+}
+function useEmojiStyleConfig() {
+  var _usePickerConfig4 = usePickerConfig(),
+      emojiStyle = _usePickerConfig4.emojiStyle;
+
+  return emojiStyle;
+}
+function useAutoFocusSearchConfig() {
+  var _usePickerConfig5 = usePickerConfig(),
+      autoFocusSearch = _usePickerConfig5.autoFocusSearch;
+
+  return autoFocusSearch;
+}
+function useCategoriesConfig() {
+  var _usePickerConfig6 = usePickerConfig(),
+      categories = _usePickerConfig6.categories;
+
+  return categories;
+}
+function useOnEmojiClickConfig() {
+  var _usePickerConfig7 = usePickerConfig(),
+      onEmojiClick = _usePickerConfig7.onEmojiClick;
+
+  return onEmojiClick;
+}
+function usePreviewConfig() {
+  var _usePickerConfig8 = usePickerConfig(),
+      previewConfig = _usePickerConfig8.previewConfig;
+
+  return previewConfig;
+}
+function useThemeConfig() {
+  var _usePickerConfig9 = usePickerConfig(),
+      theme = _usePickerConfig9.theme;
+
+  if (theme === exports.Theme.AUTO) {
+    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
+  }
+
+  return theme;
+}
+function useSuggestedEmojisModeConfig() {
+  var _usePickerConfig10 = usePickerConfig(),
+      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
+
+  return suggestedEmojisMode;
+}
+function useLazyLoadEmojisConfig() {
+  var _usePickerConfig11 = usePickerConfig(),
+      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
+
+  return lazyLoadEmojis;
+}
+function usePickerSizeConfig() {
+  var _usePickerConfig12 = usePickerConfig(),
+      height = _usePickerConfig12.height,
+      width = _usePickerConfig12.width;
+
+  return {
+    height: getDimension(height),
+    width: getDimension(width)
+  };
+}
+function useEmojiVersionConfig() {
+  var _usePickerConfig13 = usePickerConfig(),
+      emojiVersion = _usePickerConfig13.emojiVersion;
+
+  return emojiVersion;
+}
+function useGetEmojiUrlConfig() {
+  var _usePickerConfig14 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig14.getEmojiUrl;
+
+  return getEmojiUrl;
+}
+
+function getDimension(dimensionConfig) {
+  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
+}
+
 var alphaNumericEmojiIndex = {};
 setTimeout(function () {
   allEmojis.reduce(function (searchIndex, emoji) {
@@ -17819,6 +17831,7 @@ function useMouseDownHandlers(BodyRef) {
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var onClick = React.useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
@@ -17837,8 +17850,8 @@ function useMouseDownHandlers(BodyRef) {
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setsuggested(emoji, skinToneToUse);
-    onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
-  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested]);
+    onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
+  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
     var _window;
 
@@ -17909,13 +17922,13 @@ function emojiFromEvent(event) {
   return emojiFromElement(target);
 }
 
-function emojiClickOutput(emoji, activeSkinTone) {
+function emojiClickOutput(emoji, activeSkinTone, getEmojiUrl) {
   var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
     emoji: parseNativeEmoji(unified),
     getImageUrl: function getImageUrl(emojiStyle) {
-      return emojiUrlByUnified(emojiStyle, unified);
+      return getEmojiUrl(unified, emojiStyle);
     },
     names: emojiNames(emoji),
     unified: unified,
@@ -18175,7 +18188,8 @@ function ClickableEmoji(_ref) {
       _ref$showVariations = _ref.showVariations,
       showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
       size = _ref.size,
-      lazyLoad = _ref.lazyLoad;
+      lazyLoad = _ref.lazyLoad,
+      getEmojiUrl = _ref.getEmojiUrl;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement(Button, {
     className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
@@ -18187,7 +18201,8 @@ function ClickableEmoji(_ref) {
     emoji: emoji,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 function ViewOnlyEmoji(_ref2) {
@@ -18195,7 +18210,9 @@ function ViewOnlyEmoji(_ref2) {
       unified = _ref2.unified,
       emojiStyle = _ref2.emojiStyle,
       size = _ref2.size,
-      lazyLoad = _ref2.lazyLoad;
+      lazyLoad = _ref2.lazyLoad,
+      _ref2$getEmojiUrl = _ref2.getEmojiUrl,
+      getEmojiUrl = _ref2$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref2$getEmojiUrl;
   var style = {};
 
   if (size) {
@@ -18211,7 +18228,8 @@ function ViewOnlyEmoji(_ref2) {
     style: style,
     emoji: asEmoji(emojiToRender),
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 
@@ -18231,13 +18249,14 @@ function EmojiImg(_ref4) {
       emojiStyle = _ref4.emojiStyle,
       style = _ref4.style,
       _ref4$lazyLoad = _ref4.lazyLoad,
-      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad;
+      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad,
+      getEmojiUrl = _ref4.getEmojiUrl;
 
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
       setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
 
   return React.createElement("img", {
-    src: emojiUrlByUnified(emojiStyle, unified),
+    src: getEmojiUrl(unified, emojiStyle),
     alt: emojiName(emoji),
     className: clsx(ClassNames.external, 'epr-emoji-img'),
     loading: lazyLoad ? 'lazy' : 'eager',
@@ -18279,6 +18298,7 @@ function Suggested(_ref) {
       suggestedUpdated = _useUpdateSuggested[0];
 
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var suggested = React.useMemo(function () {
     var _getsuggested;
 
@@ -18302,7 +18322,8 @@ function Suggested(_ref) {
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
       emoji: emoji,
-      key: suggestedItem.unified
+      key: suggestedItem.unified,
+      getEmojiUrl: getEmojiUrl
     });
   }));
 }
@@ -18342,7 +18363,8 @@ function RenderCategory(_ref) {
   var _useActiveSkinToneSta = useActiveSkinToneState(),
       activeSkinTone = _useActiveSkinToneSta[0];
 
-  var disallowedEmojisRef = useDisallowedEmojisRef(); // Small trick to defer the rendering of all emoji categories until the first category is visible
+  var disallowedEmojisRef = useDisallowedEmojisRef();
+  var getEmojiUrl = useGetEmojiUrlConfig(); // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
 
   var emojisToPush = !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
@@ -18372,7 +18394,8 @@ function RenderCategory(_ref) {
       hidden: failedToLoad,
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis
+      lazyLoad: lazyLoadEmojis,
+      getEmojiUrl: getEmojiUrl
     });
   });
   return React.createElement(EmojiCategory, {
@@ -18405,6 +18428,7 @@ function EmojiVariationPicker() {
 
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   var getPointerStyle = usePointerStyle(VariationPickerRef);
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
   var top, pointerStyle;
@@ -18433,7 +18457,8 @@ function EmojiVariationPicker() {
       emoji: safeEmoji,
       unified: unified,
       emojiStyle: emojiStyle,
-      showVariations: false
+      showVariations: false,
+      getEmojiUrl: getEmojiUrl
     });
   }) : null, React.createElement("div", {
     className: "epr-emoji-pointer",
@@ -18631,6 +18656,7 @@ function Preview() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPickerEmoji = _useEmojiVariationPic[0];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
   if (!previewConfig.showPreview) {
@@ -18650,12 +18676,14 @@ function Preview() {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
       className: "epr-preview-emoji-label"
     }, emojiName(asEmoji(emoji))) : React.createElement("div", {
@@ -19284,7 +19312,7 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(emoji, emojiStyle) {
+function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   if (!emoji) {
     return;
   }
@@ -19300,7 +19328,7 @@ function preloadEmoji(emoji, emojiStyle) {
   }
 
   emojiVariations(emoji).forEach(function (variation) {
-    var emojiUrl = emojiUrlByUnified(emojiStyle, variation);
+    var emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
   });
   preloadedEmojs.add(unified);
@@ -19315,6 +19343,7 @@ function preloadImage(url) {
 function useOnFocus() {
   var BodyRef = useBodyRef();
   var emojiStyle = useEmojiStyleConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   React.useEffect(function () {
     if (emojiStyle === exports.EmojiStyle.NATIVE) {
       return;
@@ -19341,10 +19370,10 @@ function useOnFocus() {
       }
 
       if (emojiHasVariations(emoji)) {
-        preloadEmoji(emoji, emojiStyle);
+        preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
-  }, [BodyRef, emojiStyle]);
+  }, [BodyRef, emojiStyle, getEmojiUrl]);
 }
 
 function PickerMain(_ref) {
@@ -19367,8 +19396,8 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   var style = {
-    height: height + "px",
-    width: width + "px"
+    height: height,
+    width: width
   };
   return React.createElement("aside", {
     className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
@@ -19425,7 +19454,8 @@ function ExportedEmoji(_ref) {
       _ref$emojiStyle = _ref.emojiStyle,
       emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
       _ref$lazyLoad = _ref.lazyLoad,
-      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad;
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+      getEmojiUrl = _ref.getEmojiUrl;
 
   if (!unified) {
     return null;
@@ -19435,7 +19465,8 @@ function ExportedEmoji(_ref) {
     unified: unified,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   });
 }