emoji-picker-react 4.7.7 → 4.7.9

package/dist/emoji-picker-react.esm.js

@@ -186,6 +186,15 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
     }, hidden)
   }
 });
+function darkMode(key, value) {
+  var _eprDarkTheme, _eprAutoTheme;
+  return {
+    '.epr-dark-theme': (_eprDarkTheme = {}, _eprDarkTheme[key] = value, _eprDarkTheme),
+    '.epr-auto-theme': (_eprAutoTheme = {}, _eprAutoTheme[key] = {
+      '@media (prefers-color-scheme: dark)': value
+    }, _eprAutoTheme)
+  };
+}
 
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
 ];
@@ -18080,10 +18089,10 @@ function BtnPlus() {
     }
   });
 }
-var styles$4 = /*#__PURE__*/stylesheet.create({
+var styles$4 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   plusSign: {
     fontSize: '20px',
-    padding: '18px',
+    padding: '17px',
     color: 'var(--epr-text-color)',
     borderRadius: '50%',
     textAlign: 'center',
@@ -18093,7 +18102,7 @@ var styles$4 = /*#__PURE__*/stylesheet.create({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    transition: 'background-color 0.1s ease-in-out',
+    transition: 'background-color 0.2s ease-in-out',
     ':after': {
       content: '',
       minWidth: '20px',
@@ -18106,45 +18115,29 @@ var styles$4 = /*#__PURE__*/stylesheet.create({
     },
     ':hover': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px',
-        transform: 'scale(1.2)'
+        backgroundPositionY: '-20px'
       }
     },
     ':focus': {
       color: 'var(--epr-highlight-color)',
-      backgroundColor: 'var(--epr-hover-bg-color)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       // @ts-ignore
       ':after': {
         backgroundPositionY: '-40px'
       }
     }
+  }
+}, /*#__PURE__*/darkMode('plusSign', {
+  ':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'
-        }
-      }
-    }
+  ':hover:after': {
+    backgroundPositionY: '-60px'
   }
-});
+})));
 
 function Reactions() {
   var _useReactionsModeStat = useReactionsModeState(),
@@ -18850,7 +18843,7 @@ function useVariationPickerTop(VariationPickerRef) {
     return emojiOffsetTop - height;
   }
 }
-var styles$8 = /*#__PURE__*/stylesheet.create({
+var styles$8 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   variationPicker: {
     '.': ClassNames.variationPicker,
     position: 'absolute',
@@ -18902,20 +18895,10 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
     top: '100%',
     transform: 'translateX(-18px)',
     backgroundImage: "url(" + SVGTriangle + ")"
-  },
-  '.epr-dark-theme': {
-    pointer: {
-      backgroundPosition: '-25px 0'
-    }
-  },
-  '.epr-auto-theme': {
-    pointer: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPosition: '-25px 0'
-      }
-    }
   }
-});
+}, /*#__PURE__*/darkMode('pointer', {
+  backgroundPosition: '-25px 0'
+})));
 
 function Body() {
   var BodyRef = useBodyRef();
@@ -19659,7 +19642,7 @@ function IcnSearch() {
     className: cx(styles$h.icnSearch)
   });
 }
-var styles$h = /*#__PURE__*/stylesheet.create({
+var styles$h = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   icnSearch: {
     '.': 'epr-icn-search',
     content: '',
@@ -19673,20 +19656,10 @@ var styles$h = /*#__PURE__*/stylesheet.create({
     backgroundPosition: '0 0',
     backgroundSize: '20px',
     backgroundImage: "url(" + SVGMagnifier + ")"
-  },
-  '.epr-dark-theme': {
-    icnSearch: {
-      backgroundPositionY: '-20px'
-    }
-  },
-  '.epr-auto-theme': {
-    icnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-20px'
-      }
-    }
   }
-});
+}, /*#__PURE__*/darkMode('icnSearch', {
+  backgroundPositionY: '-20px'
+})));
 
 function SearchContainer() {
   var searchDisabled = useSearchDisabledConfig();
@@ -20280,6 +20253,7 @@ function PickerRootElement(_ref2) {
 }
 var DarkTheme = {
   '--epr-emoji-variation-picker-bg-color': 'var(--epr-dark-emoji-variation-picker-bg-color)',
+  '--epr-hover-bg-color-reduced-opacity': 'var(--epr-dark-hover-bg-color-reduced-opacity)',
   '--epr-highlight-color': 'var(--epr-dark-highlight-color)',
   '--epr-text-color': 'var(--epr-dark-text-color)',
   '--epr-hover-bg-color': 'var(--epr-dark-hover-bg-color)',
@@ -20317,6 +20291,7 @@ var styles$j = /*#__PURE__*/stylesheet.create({
     '--': {
       '--epr-highlight-color': '#007aeb',
       '--epr-hover-bg-color': '#f1f8ff',
+      '--epr-hover-bg-color-reduced-opacity': '#f1f8ff80',
       '--epr-focus-bg-color': '#e0f0ff',
       '--epr-text-color': '#858585',
       '--epr-search-input-bg-color': '#f6f6f6',
@@ -20378,6 +20353,7 @@ var styles$j = /*#__PURE__*/stylesheet.create({
       '--epr-dark-highlight-color': '#c0c0c0',
       '--epr-dark-text-color': 'var(--epr-highlight-color)',
       '--epr-dark-hover-bg-color': '#363636f6',
+      '--epr-dark-hover-bg-color-reduced-opacity': '#36363680',
       '--epr-dark-focus-bg-color': '#474747',
       '--epr-dark-search-input-bg-color': '#333333',
       '--epr-dark-category-label-bg-color': '#222222e6',