emoji-picker-react 4.20.2 → 4.20.5

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`:
 

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/components/body/EmojiCategory.d.ts

@@ -6,6 +6,7 @@ declare type Props = Readonly<{
     hidden?: boolean;
     hiddenOnSearch?: boolean;
     height?: number;
+    emojisPerRow?: number;
 }>;
-export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch, height, }: Props): JSX.Element;
+export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch, height, emojisPerRow, }: Props): JSX.Element;
 export {};

package/dist/components/emoji/Emoji.d.ts

@@ -7,8 +7,9 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
+    buttonClassName?: string;
     noBackground?: boolean;
     style?: React.CSSProperties;
 }>;
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground, style, }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, buttonClassName, noBackground, style, }: ClickableEmojiProps): JSX.Element;
 export {};

package/dist/components/header/SkinTonePicker/BtnSkinToneVariation.d.ts

@@ -6,6 +6,7 @@ declare type Props = {
     isActive: boolean;
     skinToneVariation: SkinTones;
     style?: React.CSSProperties;
+    tabIndex?: number;
 };
-export declare function BtnSkinToneVariation({ isOpen, onClick, isActive, skinToneVariation, style, }: Props): JSX.Element;
+export declare function BtnSkinToneVariation({ isOpen, onClick, isActive, skinToneVariation, style, tabIndex, }: Props): JSX.Element;
 export {};

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',
@@ -27900,6 +27900,7 @@ function useKeyboardNavigation() {
   useSearchInputKeyboardEvents();
   useSkinTonePickerKeyboardEvents();
   useCategoryNavigationKeyboardEvents();
+  useReactionsKeyboardEvents();
   useBodyKeyboardEvents();
 }
 function usePickerMainKeyboardEvents() {
@@ -28105,6 +28106,65 @@ function useCategoryNavigationKeyboardEvents() {
     };
   }, [CategoryNavigationRef, BodyRef, onKeyDown]);
 }
+// Arrow keys move between reaction buttons (and the expand button)
+// while the reactions bar has focus. The bar lives outside the scroll
+// body, so the body handler never sees these events.
+// https://github.com/ealush/emoji-picker-react/issues/411
+function useReactionsKeyboardEvents() {
+  var ReactionsRef = useReactionsRef();
+  // The reactions bar mounts late when the user collapses the full
+  // picker, so the listener effect must rerun when it opens.
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsOpen = _useReactionsModeStat[0];
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+      var current = ReactionsRef.current;
+      if (!current) {
+        return;
+      }
+      var delta = reactionFocusDelta(key);
+      if (delta !== 0 && focusReactionSibling(current, delta)) {
+        event.preventDefault();
+      }
+    };
+  },
+  // reactionsOpen: the bar mounts late on collapse, and the new
+  // callback identity reinstalls the listener effect below.
+  [ReactionsRef, reactionsOpen]);
+  React.useEffect(function () {
+    var current = ReactionsRef.current;
+    if (!current) {
+      return;
+    }
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [ReactionsRef, onKeyDown]);
+}
+function reactionFocusDelta(key) {
+  switch (key) {
+    case KeyboardEvents.ArrowRight:
+    case KeyboardEvents.ArrowDown:
+      return 1;
+    case KeyboardEvents.ArrowLeft:
+    case KeyboardEvents.ArrowUp:
+      return -1;
+    default:
+      return 0;
+  }
+}
+function focusReactionSibling(root, delta) {
+  var buttons = Array.from(root.querySelectorAll('button'));
+  var activeIndex = buttons.indexOf(getActiveElement());
+  var sibling = activeIndex === -1 ? null : buttons[activeIndex + delta];
+  if (!sibling) {
+    return false;
+  }
+  focusElement(sibling);
+  return true;
+}
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
@@ -28327,7 +28387,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,
@@ -28480,9 +28540,20 @@ var styles = /*#__PURE__*/stylesheet.create({
 });
 
 function elementCountInRow(parent, element) {
+  var _parent$dataset;
   if (!parent || !element) {
     return 0;
   }
+  // The virtualized layout positions emojis with a fixed per-row count that
+  // is rendered onto the category content element. That count is the single
+  // source of truth: deriving it again from fractional rect widths can be
+  // off by one (e.g. category padding shrinking the content box), which
+  // makes arrow-up/arrow-down drift sideways by a column.
+  // https://github.com/ealush/emoji-picker-react/issues/502
+  var declared = Number((_parent$dataset = parent.dataset) == null ? void 0 : _parent$dataset.emojisPerRow);
+  if (Number.isInteger(declared) && declared > 0) {
+    return declared;
+  }
   var parentWidth = parent.getBoundingClientRect().width;
   var elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);
@@ -28889,7 +28960,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({
@@ -28922,7 +28993,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,
@@ -29010,7 +29081,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
@@ -29032,7 +29103,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.
@@ -29120,6 +29191,7 @@ function ClickableEmoji(_ref) {
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
     className = _ref.className,
+    buttonClassName = _ref.buttonClassName,
     _ref$noBackground = _ref.noBackground,
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
@@ -29132,7 +29204,8 @@ function ClickableEmoji(_ref) {
     emojiNames: emojiNames(emoji),
     unified: unified,
     noBackground: noBackground,
-    style: style
+    style: style,
+    className: buttonClassName
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -29153,7 +29226,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);
     }
@@ -29220,7 +29293,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) {
@@ -29235,7 +29308,8 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
-      className: flairup.cx(styles$6.emojiButton),
+      className: shipstyles.cx(styles$6.emojiButton),
+      buttonClassName: shipstyles.cx(styles$6.reactionButton),
       noBackground: true,
       getEmojiUrl: getEmojiUrl
     }));
@@ -29251,6 +29325,24 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
     alignItems: 'center',
     height: '100%'
   },
+  reactionButton: {
+    // Every picker button sets outline: none, and reaction buttons also
+    // suppress the focus background, so keyboard focus was invisible.
+    // Focus mirrors the hover treatment (scale plus a soft circular
+    // wash, no outline ring): the scale transform on the inner image
+    // alone is clipped by the button's overflow: hidden, and does
+    // nothing on inline native emoji, so the button itself carries the
+    // effect. Scoped to the reactions bar so grid focus treatment is
+    // untouched.
+    // https://github.com/ealush/emoji-picker-react/issues/473
+    ':focus-visible': {
+      transform: 'scale(1.2)',
+      transition: 'background-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+      borderRadius: '50%',
+      outline: 'none'
+    }
+  },
   emojiButton: {
     ':hover': {
       transform: 'scale(1.2)'
@@ -29474,20 +29566,24 @@ function EmojiCategory(_ref) {
     children = _ref.children,
     hidden = _ref.hidden,
     hiddenOnSearch = _ref.hiddenOnSearch,
-    height = _ref.height;
+    height = _ref.height,
+    emojisPerRow = _ref.emojisPerRow;
   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,
+    role: "rowgroup",
     "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
-    }
+    },
+    role: "row",
+    "data-emojis-per-row": emojisPerRow
   }, children));
 }
 var styles$7 = /*#__PURE__*/stylesheet.create({
@@ -29589,9 +29685,19 @@ function EmojiList(_ref) {
   var getEmojisByCategory = useGetEmojisByCategory();
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
+  // role="grid" makes screen readers switch out of virtual-cursor mode so
+  // arrow keys reach the picker's keyboard handler. Each category is one
+  // rowgroup: visual rows shift under virtualization, so the category is
+  // the only stable row unit. Emoji buttons intentionally keep their
+  // native button role for activation semantics.
+  // https://github.com/ealush/emoji-picker-react/issues/508
+  // The list markup is kept for a backwards-compatible DOM structure;
+  // the grid role override is intentional (see below).
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
   return React.createElement("ul", {
-    className: flairup.cx(styles$8.emojiList),
-    ref: EmojiListRef
+    className: shipstyles.cx(styles$8.emojiList),
+    ref: EmojiListRef,
+    role: "grid"
   }, React.createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     var currentOffset = topOffset;
@@ -29637,6 +29743,7 @@ function RenderCategory(_ref2) {
   return React.createElement(EmojiCategory, {
     categoryConfig: categoryConfig,
     height: dimensions == null ? void 0 : dimensions.categoryHeight,
+    emojisPerRow: dimensions == null ? void 0 : dimensions.emojisPerRow,
     // Indicates that there are no visible emojis
     // Hence, the category should be hidden
     hidden: !emojis.length && virtualizedCounter === 0
@@ -29688,7 +29795,7 @@ 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
     }
@@ -29702,7 +29809,7 @@ function EmojiVariationPicker() {
       getEmojiUrl: getEmojiUrl
     });
   }) : null, React.createElement("div", {
-    className: flairup.cx(styles$9.pointer),
+    className: shipstyles.cx(styles$9.pointer),
     style: pointerStyle
   }));
 }
@@ -29821,7 +29928,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
@@ -29948,7 +30055,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 = {
@@ -29969,7 +30076,7 @@ function Space(_ref) {
     style: _extends({
       flex: 1
     }, style),
-    className: flairup.cx(className)
+    className: shipstyles.cx(className)
   });
 }
 
@@ -30003,11 +30110,13 @@ function BtnSkinToneVariation(_ref) {
     onClick = _ref.onClick,
     isActive = _ref.isActive,
     skinToneVariation = _ref.skinToneVariation,
-    style = _ref.style;
+    style = _ref.style,
+    tabIndex = _ref.tabIndex;
   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),
+    tabIndex: tabIndex,
+    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]
   });
@@ -30099,7 +30208,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
@@ -30107,7 +30216,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;
@@ -30115,8 +30224,14 @@ function SkinTonePicker(_ref) {
       key: skinToneVariation,
       skinToneVariation: skinToneVariation,
       isOpen: isOpen,
+      // Roving tabindex: when the fan is closed the inactive tones
+      // are invisible (opacity: 0, stacked), so they must not be
+      // reachable via Tab. The active tone stays tabbable to open
+      // the fan from the keyboard.
+      // https://github.com/ealush/emoji-picker-react/issues/492
+      tabIndex: isOpen || active ? 0 : -1,
       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() {
@@ -30184,7 +30299,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() {
@@ -30215,16 +30330,16 @@ function PreviewBody() {
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: flairup.cx(styles$e.emoji)
+      className: shipstyles.cx(styles$e.emoji)
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
       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)
+      className: shipstyles.cx(styles$e.label)
     }, show ? emojiName(emoji) : defaultText));
   }
 }
@@ -30354,7 +30469,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,
@@ -30458,7 +30573,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",
@@ -30516,12 +30631,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 = {
@@ -30575,7 +30690,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({
@@ -30604,7 +30719,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() {
@@ -30619,13 +30734,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,
@@ -30636,7 +30751,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"
@@ -30725,7 +30840,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));
 }