emoji-picker-react 4.20.1 → 4.20.4

package/README.md

@@ -57,7 +57,7 @@ See [PROPS.md](PROPS.md) for the complete props reference.
 
 ## Styling
 
-No stylesheet import needed. All styles are scoped via [Flairup](https://github.com/ealush/flairup) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
+No stylesheet import needed. All styles are scoped via [ShipStyles](https://github.com/ealush/shipstyles) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
 
 Restyle the picker by overriding [CSS variables](CSS_VARIABLES.md) on `.EmojiPickerReact`:
 
@@ -98,9 +98,11 @@ const Picker = dynamic(() => import('emoji-picker-react'));
 
 ## Troubleshooting
 
-### `global is not defined` (Vite)
+### `global is not defined` (Vite, versions before 4.20)
 
-Add this to your HTML:
+Since 4.20 the picker is SSR-safe and no longer references the Node-style
+`global`. If you see `global is not defined`, upgrade to the latest version.
+On older versions only, the workaround was adding this to your HTML:
 
 ```html
 <script>

package/dist/Stylesheet/stylesheet.d.ts

@@ -1,5 +1,5 @@
-import { Styles } from 'flairup';
 import * as React from 'react';
+import { Styles } from 'shipstyles';
 export declare const stylesheet: {
     create: <K extends string>(styles: Partial<{ [k in K]: Partial<{
         '.'?: string | string[] | undefined;

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,3 @@
-import { Categories } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis, WithName } from './DataTypes';
@@ -7,7 +6,6 @@ export declare function addedIn(emoji: DataEmoji): number;
 export declare function emojiName(emoji?: WithName): string;
 export declare function unifiedWithoutSkinTone(unified: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
-export declare function useGetEmojisByCategory(): (Category: Categories) => DataEmojis;
 export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
 export declare function emojiVariations(emoji: DataEmoji): string[];
 export declare function emojiHasVariations(emoji: DataEmoji): boolean;

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

@@ -6,7 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var flairup = require('flairup');
+var shipstyles = require('shipstyles');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -96,7 +96,7 @@ function asSelectors() {
   }).join('');
 }
 
-var stylesheet = /*#__PURE__*/flairup.createSheet('epr', null);
+var stylesheet = /*#__PURE__*/shipstyles.createSheet('epr', null);
 var hidden = {
   display: 'none',
   opacity: '0',
@@ -26744,15 +26744,57 @@ var defaultEmojiData = {
 	emojis: emojis
 };
 
-function useIsMounted() {
-  var _React$useState = React.useState(false),
-    isMounted = _React$useState[0],
-    setIsMounted = _React$useState[1];
-  React.useEffect(function () {
-    setIsMounted(true);
-  }, []);
-  return isMounted;
+// Pure data helpers plus the legacy global registry. This module intentionally
+function unifiedWithoutSkinTone$1(unified) {
+  var splat = unified.split('-');
+  var _splat$splice = splat.splice(1, 1),
+    skinTone = _splat$splice[0];
+  if (skinTonesMapped[skinTone]) {
+    return splat.join('-');
+  }
+  return unified;
 }
+function emojiUnified$1(emoji, skinTone) {
+  var _emojiVariationUnifie;
+  var unified = emoji[EmojiProperties.unified];
+  if (!skinTone || !emojiHasVariations$1(emoji)) {
+    return unified;
+  }
+  return (_emojiVariationUnifie = emojiVariationUnified$1(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
+}
+function emojiVariations$1(emoji) {
+  var _emoji$EmojiPropertie2;
+  return (_emoji$EmojiPropertie2 = emoji[EmojiProperties.variations]) != null ? _emoji$EmojiPropertie2 : [];
+}
+function emojiHasVariations$1(emoji) {
+  return emojiVariations$1(emoji).length > 0;
+}
+function emojiVariationUnified$1(emoji, skinTone) {
+  return skinTone ? emojiVariations$1(emoji).find(function (variation) {
+    return variation.includes(skinTone);
+  }) : emojiUnified$1(emoji);
+}
+function emojiByUnified(unified) {
+  if (!unified) {
+    return;
+  }
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+  var withoutSkinTone = unifiedWithoutSkinTone$1(unified);
+  return allEmojisByUnified[withoutSkinTone];
+}
+var allEmojis = /*#__PURE__*/Object.values(defaultEmojiData.emojis).flat();
+var allEmojisByUnified = {};
+allEmojis.reduce(function (allEmojis, Emoji) {
+  allEmojis[emojiUnified$1(Emoji)] = Emoji;
+  if (emojiHasVariations$1(Emoji)) {
+    emojiVariations$1(Emoji).forEach(function (variation) {
+      allEmojis[variation] = Emoji;
+    });
+  }
+  return allEmojis;
+}, allEmojisByUnified);
 
 var SUGGESTED_LS_KEY = 'epr_suggested';
 function getSuggested(mode) {
@@ -26774,8 +26816,8 @@ function getSuggested(mode) {
 }
 function setSuggested(emoji, skinTone) {
   var recent = getSuggested();
-  var unified = emojiUnified$1(emoji, skinTone);
-  var originalUnified = emojiUnified$1(emoji);
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
   var existing = recent.find(function (_ref) {
     var u = _ref.unified;
     return u === unified;
@@ -26806,99 +26848,14 @@ function setSuggested(emoji, skinTone) {
   }
 }
 
-function emojiNames$1(emoji) {
-  var _emoji$EmojiPropertie;
-  return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
-}
-function emojiName$1(emoji) {
-  if (!emoji) {
-    return '';
-  }
-  var names = emojiNames$1(emoji);
-  return names[names.length - 1];
-}
-function unifiedWithoutSkinTone$1(unified) {
-  var splat = unified.split('-');
-  var _splat$splice = splat.splice(1, 1),
-    skinTone = _splat$splice[0];
-  if (skinTonesMapped[skinTone]) {
-    return splat.join('-');
-  }
-  return unified;
-}
-function emojiUnified$1(emoji, skinTone) {
-  var _emojiVariationUnifie;
-  var unified = emoji[EmojiProperties.unified];
-  if (!skinTone || !emojiHasVariations$1(emoji)) {
-    return unified;
-  }
-  return (_emojiVariationUnifie = emojiVariationUnified$1(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
-}
-function useGetEmojisByCategory() {
-  var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  var _useUpdateSuggested = useUpdateSuggested(),
-    suggestedUpdated = _useUpdateSuggested[0];
-  // Suggestions come from localStorage, which doesn't exist during SSR.
-  // Read them only after mount so the first client render matches the server.
-  var isMounted = useIsMounted();
-  var suggested = React__default.useMemo(function () {
-    var _getSuggested;
-    if (!isMounted) {
-      return [];
-    }
-    var suggested = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
-    return suggested.map(function (s) {
-      return emojiByUnified(s.unified);
-    }).filter(Boolean);
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isMounted, suggestedUpdated, suggestedEmojisModeConfig]);
-  return function getEmojisByCategory(category) {
-    var _emojis$emojis$catego;
-    if (category === exports.Categories.SUGGESTED) {
-      return suggested;
-    }
-    // @ts-ignore
-    return (_emojis$emojis$catego = defaultEmojiData.emojis[category]) != null ? _emojis$emojis$catego : [];
-  };
-}
-function emojiVariations$1(emoji) {
-  var _emoji$EmojiPropertie2;
-  return (_emoji$EmojiPropertie2 = emoji[EmojiProperties.variations]) != null ? _emoji$EmojiPropertie2 : [];
-}
-function emojiHasVariations$1(emoji) {
-  return emojiVariations$1(emoji).length > 0;
-}
-function emojiVariationUnified$1(emoji, skinTone) {
-  return skinTone ? emojiVariations$1(emoji).find(function (variation) {
-    return variation.includes(skinTone);
-  }) : emojiUnified$1(emoji);
-}
-function emojiByUnified(unified) {
-  if (!unified) {
-    return;
-  }
-  if (allEmojisByUnified[unified]) {
-    return allEmojisByUnified[unified];
-  }
-  var withoutSkinTone = unifiedWithoutSkinTone$1(unified);
-  return allEmojisByUnified[withoutSkinTone];
-}
-var allEmojis = /*#__PURE__*/Object.values(defaultEmojiData.emojis).flat();
-var allEmojisByUnified = {};
-allEmojis.reduce(function (allEmojis, Emoji) {
-  allEmojis[emojiUnified$1(Emoji)] = Emoji;
-  if (emojiHasVariations$1(Emoji)) {
-    emojiVariations$1(Emoji).forEach(function (variation) {
-      allEmojis[variation] = Emoji;
-    });
-  }
-  return allEmojis;
-}, allEmojisByUnified);
-function activeVariationFromUnified$1(unified) {
-  var _unified$split = unified.split('-'),
-    suspectedSkinTone = _unified$split[1];
-  return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
+function useIsMounted() {
+  var _React$useState = React.useState(false),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  React.useEffect(function () {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
 }
 
 var PickerDataContext = /*#__PURE__*/React__default.createContext({
@@ -26968,7 +26925,7 @@ function PickerDataProvider(_ref) {
 function usePickerDataContext() {
   return React__default.useContext(PickerDataContext);
 }
-function useGetEmojisByCategory$1() {
+function useGetEmojisByCategory() {
   var _usePickerDataContext = usePickerDataContext(),
     emojiData = _usePickerDataContext.emojiData,
     emojiByUnified = _usePickerDataContext.emojiByUnified;
@@ -28340,7 +28297,7 @@ function useOnFocus() {
       if (!emoji) {
         return;
       }
-      if (emojiHasVariations$1(emoji)) {
+      if (emojiHasVariations(emoji)) {
         preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
@@ -28370,7 +28327,7 @@ function PickerRootElement(_ref2) {
     height = _ref3.height,
     styleProps = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
   return React.createElement("aside", {
-    className: flairup.cx(styles.main, styles.baseVariables, theme === exports.Theme.DARK && styles.darkTheme, theme === exports.Theme.AUTO && styles.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles.reactionsMenu, className),
+    className: shipstyles.cx(styles.main, styles.baseVariables, theme === exports.Theme.DARK && styles.darkTheme, theme === exports.Theme.AUTO && styles.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles.reactionsMenu, className),
     ref: PickerMainRef,
     style: _extends({}, styleProps, !reactionsMode && {
       height: height,
@@ -28817,7 +28774,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     if (!emoji || !unified) {
       return;
     }
-    var skinToneToUse = activeVariationFromUnified$1(unified) || activeSkinTone;
+    var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setSuggested(emoji, skinToneToUse);
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
@@ -28828,7 +28785,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     }
     var _emojiFromEvent2 = emojiFromEvent(event, emojiByUnified),
       emoji = _emojiFromEvent2[0];
-    if (!emoji || !emojiHasVariations$1(emoji)) {
+    if (!emoji || !emojiHasVariations(emoji)) {
       return;
     }
     mouseDownTimerRef.current = setTimeout(function () {
@@ -28894,9 +28851,9 @@ function emojiFromEvent(event, lookupEmojiByUnified) {
   return [emoji, unified != null ? unified : resolvedUnified];
 }
 function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl) {
-  var names = emojiNames$1(emoji);
+  var names = emojiNames(emoji);
   if (isCustomEmoji(emoji)) {
-    var _unified = emojiUnified$1(emoji);
+    var _unified = emojiUnified(emoji);
     return {
       activeSkinTone: activeSkinTone,
       emoji: _unified,
@@ -28910,7 +28867,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
       unifiedWithoutSkinTone: _unified
     };
   }
-  var unified = emojiUnified$1(emoji, activeSkinTone);
+  var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
     emoji: parseNativeEmoji(unified),
@@ -28924,7 +28881,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
     isCustom: false,
     names: names,
     unified: unified,
-    unifiedWithoutSkinTone: emojiUnified$1(emoji)
+    unifiedWithoutSkinTone: emojiUnified(emoji)
   };
 }
 
@@ -28932,7 +28889,7 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: flairup.cx(styles$1.button, props.className)
+    className: shipstyles.cx(styles$1.button, props.className)
   }), props.children);
 }
 var styles$1 = /*#__PURE__*/stylesheet.create({
@@ -28965,7 +28922,7 @@ function ClickableEmojiButton(_ref) {
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
   return React.createElement(Button, {
-    className: flairup.cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
+    className: shipstyles.cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
     "data-unified": unified,
     "aria-label": getAriaLabel(emojiNames),
     "data-full-name": emojiNames,
@@ -29053,7 +29010,7 @@ function EmojiImg(_ref) {
   return React.createElement("img", {
     src: imgUrl,
     alt: emojiName,
-    className: flairup.cx(styles$3.emojiImag, emojiStyles.external, emojiStyles.common, className),
+    className: shipstyles.cx(styles$3.emojiImag, emojiStyles.external, emojiStyles.common, className),
     loading: lazyLoad ? 'lazy' : 'eager',
     onError: onError,
     style: style
@@ -29075,7 +29032,7 @@ function NativeEmoji(_ref) {
     style = _ref.style,
     className = _ref.className;
   return React.createElement("span", {
-    className: flairup.cx(
+    className: shipstyles.cx(
     // Order matters: cx() lets the later class win same-property
     // conflicts, so the zeroing reset must come first and the real
     // font-size last — otherwise the emoji renders at 0px.
@@ -29166,13 +29123,13 @@ function ClickableEmoji(_ref) {
     _ref$noBackground = _ref.noBackground,
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
-  var hasVariations = emojiHasVariations$1(emoji);
+  var hasVariations = emojiHasVariations(emoji);
   return React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
     showVariations: showVariations,
     hidden: hidden,
     hiddenOnSearch: hiddenOnSearch,
-    emojiNames: emojiNames$1(emoji),
+    emojiNames: emojiNames(emoji),
     unified: unified,
     noBackground: noBackground,
     style: style
@@ -29196,7 +29153,7 @@ function BtnPlus() {
     "aria-label": "Show all Emojis",
     title: "Show all Emojis",
     tabIndex: 0,
-    className: flairup.cx(styles$5.plusSign),
+    className: shipstyles.cx(styles$5.plusSign),
     onClick: function onClick() {
       return setReactionsMode(false);
     }
@@ -29263,7 +29220,7 @@ function Reactions() {
     return null;
   }
   return React.createElement("ul", {
-    className: flairup.cx(styles$6.list, !reactionsOpen && commonStyles.hidden),
+    className: shipstyles.cx(styles$6.list, !reactionsOpen && commonStyles.hidden),
     ref: ReactionsRef,
     "aria-label": "Reactions"
   }, reactions.map(function (reaction) {
@@ -29278,7 +29235,7 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
-      className: flairup.cx(styles$6.emojiButton),
+      className: shipstyles.cx(styles$6.emojiButton),
       noBackground: true,
       getEmojiUrl: getEmojiUrl
     }));
@@ -29521,13 +29478,13 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
-    className: flairup.cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
+    className: shipstyles.cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
-    className: flairup.cx(styles$7.label)
+    className: shipstyles.cx(styles$7.label)
   }, categoryName), React.createElement("div", {
-    className: flairup.cx(styles$7.categoryContent),
+    className: shipstyles.cx(styles$7.categoryContent),
     style: {
       height: height
     }
@@ -29595,7 +29552,7 @@ function MeasureEmoji() {
   }
   var firstCategory = categories[0];
   var dummyEmoji = getEmojisByCategory(categoryFromCategoryConfig(firstCategory))[0];
-  var unified = dummyEmoji ? emojiUnified$1(dummyEmoji, activeSkinTone) : '';
+  var unified = dummyEmoji ? emojiUnified(dummyEmoji, activeSkinTone) : '';
   if (!dummyEmoji) {
     return null;
   }
@@ -29629,11 +29586,11 @@ function EmojiList(_ref) {
     categoryHeights = _React$useState[0],
     setCategoryHeights = _React$useState[1];
   var EmojiListRef = useEmojiListRef();
-  var getEmojisByCategory = useGetEmojisByCategory$1();
+  var getEmojisByCategory = useGetEmojisByCategory();
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
   return React.createElement("ul", {
-    className: flairup.cx(styles$8.emojiList),
+    className: shipstyles.cx(styles$8.emojiList),
     ref: EmojiListRef
   }, React.createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
@@ -29642,9 +29599,8 @@ function EmojiList(_ref) {
     if (categoryHeight) {
       topOffset += categoryHeight + labelHeight;
     }
-    return React.createElement(React.Suspense, {
-      key: category
-    }, React.createElement(RenderCategory, {
+    return React.createElement(RenderCategory, {
+      key: category,
       categoryEmojis: getEmojisByCategory(category),
       categoryConfig: categoryConfig,
       topOffset: currentOffset,
@@ -29657,7 +29613,7 @@ function EmojiList(_ref) {
         }
       },
       scrollTop: scrollTop
-    }));
+    });
   }));
 }
 function RenderCategory(_ref2) {
@@ -29716,7 +29672,7 @@ function EmojiVariationPicker() {
   var getPointerStyle = usePointerStyle(VariationPickerRef);
   var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
-  var visible = Boolean(emoji && button && emojiHasVariations$1(emoji) && button.classList.contains(ClassNames.emojiHasVariations));
+  var visible = Boolean(emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariations));
   React.useEffect(function () {
     if (!visible) {
       return;
@@ -29732,11 +29688,11 @@ function EmojiVariationPicker() {
   }
   return React.createElement("div", {
     ref: VariationPickerRef,
-    className: flairup.cx(styles$9.variationPicker, getMenuDirection() === Direction.Down && styles$9.pointingUp, visible && styles$9.visible),
+    className: shipstyles.cx(styles$9.variationPicker, getMenuDirection() === Direction.Down && styles$9.pointingUp, visible && styles$9.visible),
     style: {
       top: top
     }
-  }, visible && emoji ? [emojiUnified$1(emoji)].concat(emojiVariations$1(emoji)).slice(0, 6).map(function (unified) {
+  }, visible && emoji ? [emojiUnified(emoji)].concat(emojiVariations(emoji)).slice(0, 6).map(function (unified) {
     return React.createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji,
@@ -29746,7 +29702,7 @@ function EmojiVariationPicker() {
       getEmojiUrl: getEmojiUrl
     });
   }) : null, React.createElement("div", {
-    className: flairup.cx(styles$9.pointer),
+    className: shipstyles.cx(styles$9.pointer),
     style: pointerStyle
   }));
 }
@@ -29865,7 +29821,7 @@ function Body() {
   useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
   return React.createElement("div", {
-    className: flairup.cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
+    className: shipstyles.cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, {
     scrollTop: scrollTop
@@ -29992,7 +29948,7 @@ function Flex(_ref) {
     direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return React.createElement("div", {
     style: _extends({}, style),
-    className: flairup.cx(styles$b.flex, className, styles$b[direction])
+    className: shipstyles.cx(styles$b.flex, className, styles$b[direction])
   }, children);
 }
 var styles$b = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
@@ -30013,7 +29969,7 @@ function Space(_ref) {
     style: _extends({
       flex: 1
     }, style),
-    className: flairup.cx(className)
+    className: shipstyles.cx(className)
   });
 }
 
@@ -30051,7 +30007,7 @@ function BtnSkinToneVariation(_ref) {
   return React.createElement(Button, {
     style: style,
     onClick: onClick,
-    className: flairup.cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
+    className: shipstyles.cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
     "aria-pressed": isActive,
     "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
   });
@@ -30143,7 +30099,7 @@ function SkinTonePicker(_ref) {
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
   return React.createElement(Relative, {
-    className: flairup.cx(styles$d.skinTones, vertical && styles$d.vertical, isOpen && styles$d.open, vertical && isOpen && styles$d.verticalShadow),
+    className: shipstyles.cx(styles$d.skinTones, vertical && styles$d.vertical, isOpen && styles$d.open, vertical && isOpen && styles$d.verticalShadow),
     style: vertical ? {
       flexBasis: expandedSize,
       height: expandedSize
@@ -30151,7 +30107,7 @@ function SkinTonePicker(_ref) {
       flexBasis: expandedSize
     }
   }, React.createElement("div", {
-    className: flairup.cx(styles$d.select),
+    className: shipstyles.cx(styles$d.select),
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var active = skinToneVariation === activeSkinTone;
@@ -30160,7 +30116,7 @@ function SkinTonePicker(_ref) {
       skinToneVariation: skinToneVariation,
       isOpen: isOpen,
       style: {
-        transform: flairup.cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
+        transform: shipstyles.cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
       isActive: active,
       onClick: function onClick() {
@@ -30228,7 +30184,7 @@ function Preview() {
     return null;
   }
   return React.createElement(Flex, {
-    className: flairup.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
+    className: shipstyles.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
   }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
@@ -30252,24 +30208,24 @@ function PreviewBody() {
     if (!defaultEmoji) {
       return null;
     }
-    var defaultText = variationPickerEmoji ? emojiName$1(variationPickerEmoji) : previewConfig.defaultCaption;
+    var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: emoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: flairup.cx(styles$e.emoji)
+      className: shipstyles.cx(styles$e.emoji)
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
-      unified: emojiUnified$1(defaultEmoji),
+      unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: flairup.cx(styles$e.emoji)
+      className: shipstyles.cx(styles$e.emoji)
     }) : null), React.createElement("div", {
-      className: flairup.cx(styles$e.label)
-    }, show ? emojiName$1(emoji) : defaultText));
+      className: shipstyles.cx(styles$e.label)
+    }, show ? emojiName(emoji) : defaultText));
   }
 }
 var styles$e = /*#__PURE__*/stylesheet.create({
@@ -30398,7 +30354,7 @@ function CategoryButton(_ref) {
   var hasCustomIcon = icon != null;
   return React.createElement(Button, {
     tabIndex: allowNavigation ? 0 : -1,
-    className: flairup.cx(styles$f.catBtn, commonInteractionStyles.categoryBtn, hasCustomIcon ? styles$f.customIcon : "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+    className: shipstyles.cx(styles$f.catBtn, commonInteractionStyles.categoryBtn, hasCustomIcon ? styles$f.customIcon : "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
     onClick: onClick,
     "aria-label": categoryNameFromCategoryConfig(categoryConfig),
     "aria-selected": isActiveCategory,
@@ -30502,7 +30458,7 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: flairup.cx(styles$g.nav),
+    className: shipstyles.cx(styles$g.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
@@ -30560,12 +30516,12 @@ function BtnClearSearch() {
   var clearSearch = useClearSearch();
   var searchClearButtonLabel = useSearchClearButtonLabelConfig();
   return React.createElement(Button, {
-    className: flairup.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
+    className: shipstyles.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
     "aria-label": searchClearButtonLabel,
     title: searchClearButtonLabel
   }, React.createElement("div", {
-    className: flairup.cx(styles$h.icnClearnSearch)
+    className: shipstyles.cx(styles$h.icnClearnSearch)
   }));
 }
 var HoverDark = {
@@ -30619,7 +30575,7 @@ var SVGMagnifier = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG
 
 function IcnSearch() {
   return React.createElement("div", {
-    className: flairup.cx(styles$i.icnSearch)
+    className: shipstyles.cx(styles$i.icnSearch)
   });
 }
 var styles$i = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
@@ -30648,7 +30604,7 @@ function SearchContainer() {
     return null;
   }
   return React.createElement(Flex, {
-    className: flairup.cx(styles$j.overlay)
+    className: shipstyles.cx(styles$j.overlay)
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
 function Search() {
@@ -30663,13 +30619,13 @@ function Search() {
   var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
   var value = input == null ? void 0 : input.value;
   return React.createElement(Relative, {
-    className: flairup.cx(styles$j.searchContainer)
+    className: shipstyles.cx(styles$j.searchContainer)
   }, React.createElement("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: autoFocus,
     "aria-label": 'Type to search for an emoji',
     onFocus: closeAllOpenToggles,
-    className: flairup.cx(styles$j.search),
+    className: shipstyles.cx(styles$j.search),
     type: "text",
     "aria-controls": "epr-search-id",
     placeholder: placeholder,
@@ -30680,7 +30636,7 @@ function Search() {
     ref: SearchInputRef
   }), searchTerm ? React.createElement("div", {
     role: "status",
-    className: flairup.cx('epr-status-search-results', styles$j.visuallyHidden),
+    className: shipstyles.cx('epr-status-search-results', styles$j.visuallyHidden),
     "aria-live": "polite",
     id: "epr-search-id",
     "aria-atomic": "true"
@@ -30769,7 +30725,7 @@ var styles$j = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
 
 function Header() {
   return React.createElement(Relative, {
-    className: flairup.cx('epr-header', commonInteractionStyles.hiddenOnReactions)
+    className: shipstyles.cx('epr-header', commonInteractionStyles.hiddenOnReactions)
   }, React.createElement(SearchContainer, null), React.createElement(CategoryNavigation, null));
 }