emoji-picker-react 4.6.14 → 4.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.14",
+  "version": "4.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -12,7 +12,10 @@
     "emoji-picker",
     "react-emoji-picker",
     "emoji",
-    "emojis"
+    "emojis",
+    "reactions",
+    "reactions-picker",
+    "emoji-reactions"
   ],
   "engines": {
     "node": ">=10"

package/src/EmojiPickerReact.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
+import { Reactions } from './components/Reactions/Reactions';
 import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
 import { PickerConfigProvider } from './components/context/PickerConfigContext';
+import { useReactionsModeState } from './components/context/PickerContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
@@ -14,21 +16,44 @@ function EmojiPicker(props: PickerProps) {
     <ElementRefContextProvider>
       <PickerConfigProvider {...props}>
         <PickerMain>
-          <Header />
-          <Body />
-          <Preview />
+          <ContentControl />
         </PickerMain>
       </PickerConfigProvider>
     </ElementRefContextProvider>
   );
 }
 
+function ContentControl() {
+  const [reactionsDefaultOpen] = useReactionsModeState();
+  const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
+
+  React.useEffect(() => {
+    if (!renderAll) {
+      setRenderAll(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <Reactions />
+      {renderAll ? (
+        <>
+          <Header />
+          <Body />
+          <Preview />
+        </>
+      ) : null}
+    </>
+  );
+}
+
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, (prev, next) => {
   const prevCustomEmojis = prev.customEmojis ?? [];
   const nextCustomEmojis = next.customEmojis ?? [];
   return (
     prev.emojiVersion === next.emojiVersion &&
+    prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&
     prev.searchPlaceholder === next.searchPlaceholder &&
     prev.defaultSkinTone === next.defaultSkinTone &&

package/src/Stylesheet/stylesheet.tsx

@@ -10,7 +10,8 @@ const hidden = {
   display: 'none',
   opacity: '0',
   pointerEvents: 'none',
-  visibility: 'hidden'
+  visibility: 'hidden',
+  overflow: 'hidden'
 };
 
 export const commonStyles = stylesheet.create({
@@ -53,7 +54,18 @@ export const commonInteractionStyles = stylesheet.create({
       visibleOnSearchOnly: hidden
     }
   },
-
+  hiddenOnReactions: {
+    transition: 'all 0.5s ease-in-out'
+  },
+  '.epr-reactions': {
+    hiddenOnReactions: {
+      height: '0px',
+      width: '0px',
+      opacity: '0',
+      pointerEvents: 'none',
+      overflow: 'hidden'
+    }
+  },
   '.EmojiPickerReact:not(.epr-search-active)': {
     categoryBtn: {
       ':hover': {

package/src/components/Reactions/BtnPlus.tsx

@@ -0,0 +1,78 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import { Button } from '../atoms/Button';
+import { useReactionsModeState } from '../context/PickerContext';
+
+import Plus from './svg/plus.svg';
+
+export function BtnPlus() {
+  const [, setReactionsMode] = useReactionsModeState();
+  return (
+    <Button
+      aria-label="Show all Emojis"
+      title="Show all Emojis"
+      tabIndex={0}
+      className={cx(styles.plusSign)}
+      onClick={() => setReactionsMode(false)}
+    />
+  );
+}
+
+const styles = stylesheet.create({
+  plusSign: {
+    fontSize: '20px',
+    padding: '18px',
+    color: 'var(--epr-text-color)',
+    borderRadius: '50%',
+    textAlign: 'center',
+    lineHeight: '100%',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'background-color 0.1s ease-in-out',
+    ':after': {
+      content: '',
+      minWidth: '20px',
+      minHeight: '20px',
+      backgroundImage: `url(${Plus})`,
+      backgroundColor: 'transparent',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '20px',
+      backgroundPositionY: '0'
+    },
+    ':hover': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-20px'
+      }
+    },
+    ':focus': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-40px'
+      }
+    }
+  },
+  '.epr-dark-theme': {
+    plusSign: {
+      ':after': { backgroundPositionY: '-40px' },
+      ':hover:after': { backgroundPositionY: '-60px' }
+    }
+  },
+  '.epr-auto-theme': {
+    plusSign: {
+      '@media (prefers-color-scheme: dark)': {
+        ':after': { backgroundPositionY: '-40px' },
+        ':hover:after': { backgroundPositionY: '-60px' }
+      }
+    }
+  }
+});

package/src/components/Reactions/DEFAULT_REACTIONS.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_REACTIONS = [
+  '1f44d', // 👍
+  '2764-fe0f', // ❤️
+  '1f603', // 😃
+  '1f622', // 😢
+  '1f64f', // 🙏
+  '1f44e', // 👎
+  '1f621' // 😡
+];

package/src/components/Reactions/Reactions.tsx

@@ -0,0 +1,62 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  useEmojiStyleConfig,
+  useReactionsConfig
+} from '../../config/useConfig';
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import { emojiByUnified } from '../../dataUtils/emojiSelectors';
+import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
+import { useReactionsRef } from '../context/ElementRefContext';
+import { useReactionsModeState } from '../context/PickerContext';
+import { ClickableEmoji } from '../emoji/Emoji';
+
+import { BtnPlus } from './BtnPlus';
+
+export function Reactions() {
+  const [reactionsOpen] = useReactionsModeState();
+  const ReactionsRef = useReactionsRef();
+  const reactions = useReactionsConfig();
+  useMouseDownHandlers(ReactionsRef);
+  const emojiStyle = useEmojiStyleConfig();
+
+  if (!reactionsOpen) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={cx(styles.list, !reactionsOpen && commonStyles.hidden)}
+      ref={ReactionsRef}
+    >
+      {reactions.map(reaction => (
+        <li key={reaction}>
+          <ClickableEmoji
+            emoji={emojiByUnified(reaction) as DataEmoji}
+            emojiStyle={emojiStyle}
+            unified={reaction}
+            showVariations={false}
+            round
+          />
+        </li>
+      ))}
+      <li>
+        <BtnPlus />
+      </li>
+    </ul>
+  );
+}
+
+const styles = stylesheet.create({
+  list: {
+    listStyle: 'none',
+    margin: '0',
+    padding: '0 5px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%'
+  }
+});

package/src/components/Reactions/svg/plus.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="20px" height="80px" viewBox="0 0 20 80" enable-background="new 0 0 20 80" xml:space="preserve">
+<path fill="#868686" d="M5.7,10.4c0,0.1,0.1,0.3,0.2,0.4C6,10.9,6.1,11,6.3,11h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4
+	c0.1,0.1,0.2,0.2,0.4,0.2c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4V6.7c0-0.3-0.2-0.5-0.5-0.5
+	C9.8,6,9.6,6.2,9.6,6.5v3.4H6.2C5.9,9.9,5.7,10.1,5.7,10.4L5.7,10.4z"/>
+<path fill="#3371B7" d="M5.7,30.4c0,0.1,0.1,0.3,0.2,0.4S6.1,31,6.3,31h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2
+	c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v3.4H6.2
+	C5.9,29.9,5.7,30.1,5.7,30.4L5.7,30.4z"/>
+<path fill="#C0C0BF" d="M5.7,50.4c0,0.1,0.1,0.3,0.2,0.4C6,50.9,6.1,51,6.3,51h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4
+	c0.1,0.1,0.2,0.2,0.4,0.2c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5
+	s-0.5,0.2-0.5,0.5v3.4H6.2C5.9,49.9,5.7,50.1,5.7,50.4L5.7,50.4z"/>
+<path fill="#6AA9DD" d="M5.7,70.4c0,0.1,0.1,0.3,0.2,0.4S6.1,71,6.3,71h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2
+	c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v3.4H6.4
+	C5.9,69.9,5.7,70.1,5.7,70.4L5.7,70.4z"/>
+</svg>

package/src/components/body/Body.tsx

@@ -2,7 +2,10 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -18,7 +21,10 @@ export function Body() {
   useOnMouseMove();
 
   return (
-    <div className={cx(styles.body)} ref={BodyRef}>
+    <div
+      className={cx(styles.body, commonInteractionStyles.hiddenOnReactions)}
+      ref={BodyRef}
+    >
       <EmojiVariationPicker />
       <EmojiList />
     </div>

package/src/components/body/EmojiVariationPicker.tsx

@@ -200,6 +200,12 @@ const styles = stylesheet.create({
     transform: 'scale(0.9)',
     transition: 'transform 0.1s ease-out, opacity 0.2s ease-out'
   },
+  visible: {
+    opacity: '1',
+    visibility: 'visible',
+    pointerEvents: 'all',
+    transform: 'scale(1)'
+  },
   pointingUp: {
     '.': 'pointing-up',
     transformOrigin: 'center 0%',
@@ -211,12 +217,6 @@ const styles = stylesheet.create({
       transform: 'rotate(180deg) translateY(100%) translateX(18px)'
     }
   },
-  visible: {
-    opacity: '1',
-    visibility: 'visible',
-    pointerEvents: 'all',
-    transform: 'scale(1)'
-  },
   pointer: {
     '.': 'epr-emoji-pointer',
     content: '',
@@ -237,7 +237,6 @@ const styles = stylesheet.create({
   },
   '.epr-auto-theme': {
     pointer: {
-      // @ts-ignore
       '@media (prefers-color-scheme: dark)': {
         backgroundPosition: '-25px 0'
       }

package/src/components/context/ElementRefContext.tsx

@@ -15,6 +15,7 @@ export function ElementRefContextProvider({
   const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
   const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
   const VariationPickerRef = React.useRef<HTMLDivElement>(null);
+  const ReactionsRef = React.useRef<HTMLUListElement>(null);
 
   return (
     <ElementRefContext.Provider
@@ -25,7 +26,8 @@ export function ElementRefContextProvider({
         PickerMainRef,
         SearchInputRef,
         SkinTonePickerRef,
-        VariationPickerRef
+        VariationPickerRef,
+        ReactionsRef
       }}
     >
       {children}
@@ -45,6 +47,7 @@ type ElementRefs = {
   BodyRef: ElementRef<HTMLDivElement>;
   CategoryNavigationRef: ElementRef<HTMLDivElement>;
   VariationPickerRef: ElementRef<HTMLDivElement>;
+  ReactionsRef: ElementRef<HTMLUListElement>;
 };
 
 const ElementRefContext = React.createContext<ElementRefs>({
@@ -54,7 +57,8 @@ const ElementRefContext = React.createContext<ElementRefs>({
   PickerMainRef: React.createRef(),
   SearchInputRef: React.createRef(),
   SkinTonePickerRef: React.createRef(),
-  VariationPickerRef: React.createRef()
+  VariationPickerRef: React.createRef(),
+  ReactionsRef: React.createRef()
 });
 
 function useElementRef() {
@@ -84,6 +88,10 @@ export function useBodyRef() {
   return useElementRef()['BodyRef'];
 }
 
+export function useReactionsRef() {
+  return useElementRef()['ReactionsRef'];
+}
+
 export function useSearchInputRef() {
   return useElementRef()['SearchInputRef'];
 }

package/src/components/context/PickerContext.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { useDefaultSkinToneConfig } from '../../config/useConfig';
+import {
+  useDefaultSkinToneConfig,
+  useReactionsOpenConfig
+} from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
@@ -13,6 +16,7 @@ import { SkinTones } from '../../types/exposedTypes';
 export function PickerContextProvider({ children }: Props) {
   const disallowedEmojis = useDisallowedEmojis();
   const defaultSkinTone = useDefaultSkinToneConfig();
+  const reactionsDefaultOpen = useReactionsOpenConfig();
 
   // Initialize the filter with the inititial dictionary
   const filterRef = React.useRef<FilterState>(alphaNumericEmojiIndex);
@@ -29,6 +33,7 @@ export function PickerContextProvider({ children }: Props) {
   const activeCategoryState = useState<ActiveCategoryState>(null);
   const emojisThatFailedToLoadState = useState<Set<string>>(new Set());
   const emojiVariationPickerState = useState<DataEmoji | null>(null);
+  const reactionsModeState = useState(reactionsDefaultOpen);
   const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
 
   useMarkInitialLoad(setIsPastInitialLoad);
@@ -47,7 +52,8 @@ export function PickerContextProvider({ children }: Props) {
         isPastInitialLoad,
         searchTerm,
         skinToneFanOpenState,
-        suggestedUpdateState
+        suggestedUpdateState,
+        reactionsModeState
       }}
     >
       {children}
@@ -70,6 +76,7 @@ const PickerContext = React.createContext<{
   disallowClickRef: React.MutableRefObject<boolean>;
   disallowMouseRef: React.MutableRefObject<boolean>;
   disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
+  reactionsModeState: ReactState<boolean>;
 }>({
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
@@ -82,7 +89,8 @@ const PickerContext = React.createContext<{
   isPastInitialLoad: true,
   searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}]
+  suggestedUpdateState: [Date.now(), () => {}],
+  reactionsModeState: [false, () => {}]
 });
 
 type Props = Readonly<{
@@ -104,6 +112,11 @@ export function useDisallowMouseRef() {
   return disallowMouseRef;
 }
 
+export function useReactionsModeState() {
+  const { reactionsModeState } = React.useContext(PickerContext);
+  return reactionsModeState;
+}
+
 export function useSearchTermState() {
   const { searchTerm } = React.useContext(PickerContext);
   return searchTerm;

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -2,7 +2,11 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { commonInteractionStyles, commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  commonStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';
 
 type ClickableEmojiButtonProps = Readonly<{
@@ -13,6 +17,7 @@ type ClickableEmojiButtonProps = Readonly<{
   children: React.ReactNode;
   hasVariations: boolean;
   unified?: string;
+  round?: boolean;
 }>;
 
 export function ClickableEmojiButton({
@@ -22,7 +27,8 @@ export function ClickableEmojiButton({
   hiddenOnSearch,
   showVariations = true,
   hasVariations,
-  children
+  children,
+  round = false
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -33,7 +39,8 @@ export function ClickableEmojiButton({
         {
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
-        !!(hasVariations && showVariations) && styles.hasVariations
+        !!(hasVariations && showVariations) && styles.hasVariations,
+        round && styles.round
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}
@@ -66,6 +73,9 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
+  round: {
+    borderRadius: '50%'
+  },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,
     ':after': {

package/src/components/emoji/Emoji.tsx

@@ -14,6 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
+    round?: boolean;
   }
 >;
 
@@ -26,7 +27,8 @@ export function ClickableEmoji({
   showVariations = true,
   size,
   lazyLoad,
-  getEmojiUrl
+  getEmojiUrl,
+  round = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -38,6 +40,7 @@ export function ClickableEmoji({
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}
+      round={round}
     >
       <ViewOnlyEmoji
         unified={unified}

package/src/components/footer/Preview.tsx

@@ -2,7 +2,10 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
@@ -19,7 +22,7 @@ import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
-import { SkinTonePickerMenu } from '../header/SkinTonePicker';
+import { SkinTonePickerMenu } from '../header/SkinTonePicker/SkinTonePicker';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();
@@ -30,7 +33,9 @@ export function Preview() {
   }
 
   return (
-    <Flex className={cx(styles.preview)}>
+    <Flex
+      className={cx(styles.preview, commonInteractionStyles.hiddenOnReactions)}
+    >
       <PreviewBody />
       <Space />
       {isSkinToneInPreview ? <SkinTonePickerMenu /> : null}
@@ -88,11 +93,9 @@ export function PreviewBody() {
             />
           ) : null}
         </div>
-        {show ? (
-          <div className={cx(styles.label)}>{emojiName(emoji)}</div>
-        ) : (
-          <div className={cx(styles.label)}>{defaultText}</div>
-        )}
+        <div className={cx(styles.label)}>
+          {show ? emojiName(emoji) : defaultText}
+        </div>
       </>
     );
   }

package/src/components/header/Header.tsx

@@ -1,13 +1,17 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
+import { commonInteractionStyles } from '../../Stylesheet/stylesheet';
 import Relative from '../Layout/Relative';
 import { CategoryNavigation } from '../navigation/CategoryNavigation';
 
-import { SearchContainer } from './Search';
+import { SearchContainer } from './Search/Search';
 
 export function Header() {
   return (
-    <Relative className="epr-header">
+    <Relative
+      className={cx('epr-header', commonInteractionStyles.hiddenOnReactions)}
+    >
       <SearchContainer />
       <CategoryNavigation />
     </Relative>

package/src/components/header/Search/BtnClearSearch.tsx

@@ -0,0 +1,91 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../../Stylesheet/stylesheet';
+import { useClearSearch } from '../../../hooks/useFilter';
+import { Button } from '../../atoms/Button';
+
+import SVGTimes from './svg/times.svg';
+
+export function BtnClearSearch() {
+  const clearSearch = useClearSearch();
+
+  return (
+    <Button
+      className={cx(
+        styles.btnClearSearch,
+        commonInteractionStyles.visibleOnSearchOnly
+      )}
+      onClick={clearSearch}
+      aria-label="Clear"
+      title="Clear"
+    >
+      <div className={cx(styles.icnClearnSearch)} />
+    </Button>
+  );
+}
+
+const HoverDark = {
+  ':hover': {
+    '> .epr-icn-clear-search': {
+      backgroundPositionY: '-60px'
+    }
+  }
+};
+
+const styles = stylesheet.create({
+  btnClearSearch: {
+    '.': 'epr-btn-clear-search',
+    position: 'absolute',
+    right: 'var(--epr-search-bar-inner-padding)',
+    height: '30px',
+    width: '30px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    padding: '0',
+    borderRadius: '50%',
+    ':hover': {
+      background: 'var(--epr-hover-bg-color)'
+    },
+    ':focus': {
+      background: 'var(--epr-hover-bg-color)'
+    }
+  },
+  icnClearnSearch: {
+    '.': 'epr-icn-clear-search',
+    backgroundColor: 'transparent',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '20px',
+    height: '20px',
+    width: '20px',
+    backgroundImage: `url(${SVGTimes})`,
+    ':hover': {
+      backgroundPositionY: '-20px'
+    },
+    ':focus': {
+      backgroundPositionY: '-20px'
+    }
+  },
+  '.epr-dark-theme': {
+    icnClearnSearch: {
+      backgroundPositionY: '-40px'
+    },
+    btnClearSearch: HoverDark
+  },
+  '.epr-auto-theme': {
+    icnClearnSearch: {
+      '@media (prefers-color-scheme: dark)': {
+        backgroundPositionY: '-40px'
+      }
+    },
+    btnClearSearch: {
+      '@media (prefers-color-scheme: dark)': HoverDark
+    }
+  }
+});