emoji-picker-react 4.7.1 → 4.7.3

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

@@ -17849,10 +17849,11 @@ function ClickableEmojiButton(_ref) {
     showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
     hasVariations = _ref.hasVariations,
     children = _ref.children,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    className = _ref.className,
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   return createElement(Button, {
-    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round),
+    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, noBackground && styles$1.noBackground, className),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -17880,8 +17881,16 @@ var styles$1 = /*#__PURE__*/stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
-  round: {
-    borderRadius: '50%'
+  noBackground: {
+    background: 'none',
+    ':hover': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    },
+    ':focus': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    }
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,
@@ -18031,8 +18040,9 @@ function ClickableEmoji(_ref) {
     size = _ref.size,
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    className = _ref.className,
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   var hasVariations = emojiHasVariations(emoji);
   return createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -18041,14 +18051,15 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    round: round
+    noBackground: noBackground
   }, createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
     size: size,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    getEmojiUrl: getEmojiUrl,
+    className: className
   }));
 }
 
@@ -18096,7 +18107,8 @@ var styles$4 = /*#__PURE__*/stylesheet.create({
       backgroundColor: 'var(--epr-hover-bg-color)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px'
+        backgroundPositionY: '-20px',
+        transform: 'scale(1.2)'
       }
     },
     ':focus': {
@@ -18153,7 +18165,8 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
-      round: true
+      className: cx(styles$5.emojiButton),
+      noBackground: true
     }));
   }), createElement("li", null, createElement(BtnPlus, null)));
 }
@@ -18166,6 +18179,12 @@ var styles$5 = /*#__PURE__*/stylesheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     height: '100%'
+  },
+  emojiButton: {
+    ':hover': {
+      transform: 'scale(1.2)'
+    },
+    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });