emoji-picker-react 4.15.2 → 4.16.1

package/README.md

@@ -73,6 +73,7 @@ The following props are accepted by the picker:
 | lazyLoadEmojis         | boolean                                                | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                                      |
 | previewConfig          | object                                                 | `{}`       | Controls the preview of the emoji. See below for more information.                                                                                         |
 | searchPlaceholder      | string                                                 | `Search`   | Controls the placeholder of the search input.                                                                                                              |
+| searchClearButtonLabel | string                                                 | 'Clear'    | Controls the `aria-label` and `title` of the Clear button of the search input.                                                                             |
 | suggestedEmojisMode    | string                                                 | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                                           |
 | skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                                       |
 | searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
@@ -166,6 +167,8 @@ import { SkinTones } from 'emoji-picker-react';
 
 - `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.
 
+- `searchClearButtonLabel`: `string` - The `aria-label` and `title` text for the search input clear button. Defaults to `Clear`.
+
 - categories: Allows full config over ordering, naming and display of categories.
   To only sort/omit categories, you can simply pass an array of category names to display:
 

package/dist/config/config.d.ts

@@ -4,6 +4,7 @@ import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, Suggesti
 import { CategoriesConfig } from './categoryConfig';
 import { CustomEmoji } from './customEmojiConfig';
 export declare const DEFAULT_SEARCH_PLACEHOLDER = "Search";
+export declare const DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = "Clear";
 export declare const SEARCH_RESULTS_NO_RESULTS_FOUND = "No results found";
 export declare const SEARCH_RESULTS_SUFFIX = " found. Use up and down arrow keys to navigate.";
 export declare const SEARCH_RESULTS_ONE_RESULT_FOUND: string;
@@ -14,6 +15,7 @@ export declare type PickerConfigInternal = {
     emojiVersion: string | null;
     searchPlaceHolder: string;
     searchPlaceholder: string;
+    searchClearButtonLabel: string;
     defaultSkinTone: SkinTones;
     skinTonesDisabled: boolean;
     autoFocusSearch: boolean;

package/dist/config/useConfig.d.ts

@@ -8,6 +8,7 @@ export declare enum MOUSE_EVENT_SOURCE {
     PICKER = "picker"
 }
 export declare function useSearchPlaceHolderConfig(): string;
+export declare function useSearchClearButtonLabelConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useAllowExpandReactions(): boolean;
 export declare function useSkinTonesDisabledConfig(): boolean;

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

@@ -8,60 +8,74 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var flairup = require('flairup');
 
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _createForOfIteratorHelperLoose(r, e) {
-  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (t) return (t = t.call(r)).next.bind(t);
-  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
-    t && (r = t);
-    var o = 0;
-    return function () {
-      return o >= r.length ? {
-        done: !0
-      } : {
-        done: !1,
-        value: r[o++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return n;
-  }, _extends.apply(null, arguments);
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
 }
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
-  return t;
+  return target;
 }
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 var ClassNames;
@@ -177,7 +191,7 @@ function compareConfig(prev, next) {
   var _prev$customEmojis, _next$customEmojis;
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.searchClearButtonLabel === next.searchClearButtonLabel && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
 }
 
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
@@ -420,23 +434,23 @@ function useEmojiVariationPickerState() {
   return emojiVariationPickerState;
 }
 function useSkinToneFanOpenState() {
-  var _React$useContext0 = React.useContext(PickerContext),
-    skinToneFanOpenState = _React$useContext0.skinToneFanOpenState;
+  var _React$useContext10 = React.useContext(PickerContext),
+    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
   return skinToneFanOpenState;
 }
 function useVisibleCategoriesState() {
-  var _React$useContext10 = React.useContext(PickerContext),
-    visibleCategoriesState = _React$useContext10.visibleCategoriesState;
+  var _React$useContext12 = React.useContext(PickerContext),
+    visibleCategoriesState = _React$useContext12.visibleCategoriesState;
   return visibleCategoriesState;
 }
 function useEmojiSizeState() {
-  var _React$useContext11 = React.useContext(PickerContext),
-    emojiSizeState = _React$useContext11.emojiSizeState;
+  var _React$useContext13 = React.useContext(PickerContext),
+    emojiSizeState = _React$useContext13.emojiSizeState;
   return emojiSizeState;
 }
 function useUpdateSuggested() {
-  var _React$useContext12 = React.useContext(PickerContext),
-    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+  var _React$useContext14 = React.useContext(PickerContext),
+    suggestedUpdateState = _React$useContext14.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
     setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
@@ -17539,6 +17553,7 @@ function activeVariationFromUnified(unified) {
 
 var KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 var DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+var DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = 'Clear';
 var SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
 var SEARCH_RESULTS_SUFFIX = ' found. Use up and down arrow keys to navigate.';
 var SEARCH_RESULTS_ONE_RESULT_FOUND = '1 result' + SEARCH_RESULTS_SUFFIX;
@@ -17581,6 +17596,7 @@ function basePickerConfig() {
     searchDisabled: false,
     searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
+    searchClearButtonLabel: DEFAULT_SEARCH_CLEAR_BUTTON_LABEL,
     skinTonePickerLocation: exports.SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     style: {},
@@ -17602,7 +17618,7 @@ var basePreviewConfig = {
 };
 
 var _excluded = ["children"];
-var ConfigContext = /*#__PURE__*/React.createContext(/*#__PURE__*/basePickerConfig());
+var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
 function PickerConfigProvider(_ref) {
   var children = _ref.children,
     config = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -17625,7 +17641,7 @@ function useSetConfig(config) {
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions]);
+  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.searchClearButtonLabel, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions]);
   return mergedConfig;
 }
 function usePickerConfig() {
@@ -17668,44 +17684,49 @@ function useSearchPlaceHolderConfig() {
     return p !== DEFAULT_SEARCH_PLACEHOLDER;
   })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
 }
-function useDefaultSkinToneConfig() {
+function useSearchClearButtonLabelConfig() {
   var _usePickerConfig2 = usePickerConfig(),
-    defaultSkinTone = _usePickerConfig2.defaultSkinTone;
+    searchClearButtonLabel = _usePickerConfig2.searchClearButtonLabel;
+  return searchClearButtonLabel != null ? searchClearButtonLabel : DEFAULT_SEARCH_CLEAR_BUTTON_LABEL;
+}
+function useDefaultSkinToneConfig() {
+  var _usePickerConfig3 = usePickerConfig(),
+    defaultSkinTone = _usePickerConfig3.defaultSkinTone;
   return defaultSkinTone;
 }
 function useAllowExpandReactions() {
-  var _usePickerConfig3 = usePickerConfig(),
-    allowExpandReactions = _usePickerConfig3.allowExpandReactions;
+  var _usePickerConfig4 = usePickerConfig(),
+    allowExpandReactions = _usePickerConfig4.allowExpandReactions;
   return allowExpandReactions;
 }
 function useSkinTonesDisabledConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-    skinTonesDisabled = _usePickerConfig4.skinTonesDisabled;
+  var _usePickerConfig5 = usePickerConfig(),
+    skinTonesDisabled = _usePickerConfig5.skinTonesDisabled;
   return skinTonesDisabled;
 }
 function useEmojiStyleConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-    emojiStyle = _usePickerConfig5.emojiStyle;
+  var _usePickerConfig6 = usePickerConfig(),
+    emojiStyle = _usePickerConfig6.emojiStyle;
   return emojiStyle;
 }
 function useAutoFocusSearchConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-    autoFocusSearch = _usePickerConfig6.autoFocusSearch;
+  var _usePickerConfig7 = usePickerConfig(),
+    autoFocusSearch = _usePickerConfig7.autoFocusSearch;
   return autoFocusSearch;
 }
 function useCategoriesConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-    categories = _usePickerConfig7.categories;
+  var _usePickerConfig8 = usePickerConfig(),
+    categories = _usePickerConfig8.categories;
   return categories;
 }
 function useCustomEmojisConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-    customEmojis = _usePickerConfig8.customEmojis;
+  var _usePickerConfig9 = usePickerConfig(),
+    customEmojis = _usePickerConfig9.customEmojis;
   return customEmojis;
 }
 function useOpenConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-    open = _usePickerConfig9.open;
+  var _usePickerConfig10 = usePickerConfig(),
+    open = _usePickerConfig10.open;
   return open;
 }
 function useOnEmojiClickConfig(mouseEventSource) {
@@ -17746,73 +17767,73 @@ function useOnSkinToneChangeConfig() {
   return current.onSkinToneChange || function () {};
 }
 function usePreviewConfig() {
-  var _usePickerConfig0 = usePickerConfig(),
-    previewConfig = _usePickerConfig0.previewConfig;
+  var _usePickerConfig11 = usePickerConfig(),
+    previewConfig = _usePickerConfig11.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig1 = usePickerConfig(),
-    theme = _usePickerConfig1.theme;
+  var _usePickerConfig12 = usePickerConfig(),
+    theme = _usePickerConfig12.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
+  var _usePickerConfig13 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig13.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
+  var _usePickerConfig14 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig14.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    className = _usePickerConfig12.className;
+  var _usePickerConfig15 = usePickerConfig(),
+    className = _usePickerConfig15.className;
   return className;
 }
 function useStyleConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    height = _usePickerConfig13.height,
-    width = _usePickerConfig13.width,
-    style = _usePickerConfig13.style;
+  var _usePickerConfig16 = usePickerConfig(),
+    height = _usePickerConfig16.height,
+    width = _usePickerConfig16.width,
+    style = _usePickerConfig16.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
   }, style);
 }
 function useReactionsOpenConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig14.reactionsDefaultOpen;
+  var _usePickerConfig17 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig17.reactionsDefaultOpen;
   return reactionsDefaultOpen;
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    emojiVersion = _usePickerConfig15.emojiVersion;
+  var _usePickerConfig18 = usePickerConfig(),
+    emojiVersion = _usePickerConfig18.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    searchDisabled = _usePickerConfig16.searchDisabled;
+  var _usePickerConfig19 = usePickerConfig(),
+    searchDisabled = _usePickerConfig19.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig17.skinTonePickerLocation;
+  var _usePickerConfig20 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig20.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig18 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig18.unicodeToHide;
+  var _usePickerConfig21 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig21.unicodeToHide;
   return unicodeToHide;
 }
 function useReactionsConfig() {
-  var _usePickerConfig19 = usePickerConfig(),
-    reactions = _usePickerConfig19.reactions;
+  var _usePickerConfig22 = usePickerConfig(),
+    reactions = _usePickerConfig22.reactions;
   return reactions;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig20 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig20.getEmojiUrl;
+  var _usePickerConfig23 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig23.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -19607,7 +19628,7 @@ function BtnPlus() {
     }
   });
 }
-var styles$5 = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$5 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   plusSign: {
     fontSize: '20px',
     padding: '17px',
@@ -20198,7 +20219,7 @@ function useVariationPickerTop(VariationPickerRef) {
     return emojiOffsetTop - height;
   }
 }
-var styles$9 = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$9 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   variationPicker: {
     '.': ClassNames.variationPicker,
     position: 'absolute',
@@ -20810,7 +20831,7 @@ var DarkInactivePosition = {
     }
   }
 };
-var styles$f = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$f = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   catBtn: {
     '.': 'epr-cat-btn',
     display: 'inline-block',
@@ -20939,11 +20960,12 @@ var SVGTimes = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz
 
 function BtnClearSearch() {
   var clearSearch = useClearSearch();
+  var searchClearButtonLabel = useSearchClearButtonLabelConfig();
   return React.createElement(Button, {
     className: flairup.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
-    "aria-label": "Clear",
-    title: "Clear"
+    "aria-label": searchClearButtonLabel,
+    title: searchClearButtonLabel
   }, React.createElement("div", {
     className: flairup.cx(styles$h.icnClearnSearch)
   }));
@@ -20955,7 +20977,7 @@ var HoverDark = {
     }
   }
 };
-var styles$h = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$h = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   btnClearSearch: {
     '.': 'epr-btn-clear-search',
     position: 'absolute',
@@ -21002,7 +21024,7 @@ function IcnSearch() {
     className: flairup.cx(styles$i.icnSearch)
   });
 }
-var styles$i = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$i = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   icnSearch: {
     '.': 'epr-icn-search',
     content: '',
@@ -21066,7 +21088,7 @@ function Search() {
     "aria-atomic": "true"
   }, statusSearchResults) : null, React.createElement(IcnSearch, null), React.createElement(BtnClearSearch, null));
 }
-var styles$j = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
+var styles$j = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'