emoji-picker-react 4.7.2 → 4.7.4

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

@@ -17850,10 +17850,10 @@ function ClickableEmojiButton(_ref) {
     hasVariations = _ref.hasVariations,
     children = _ref.children,
     className = _ref.className,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    _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),
+    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
@@ -17881,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,
@@ -18033,8 +18041,8 @@ function ClickableEmoji(_ref) {
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
     className = _ref.className,
-    _ref$round = _ref.round,
-    round = _ref$round === void 0 ? false : _ref$round;
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
   var hasVariations = emojiHasVariations(emoji);
   return createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -18043,7 +18051,7 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    round: round
+    noBackground: noBackground
   }, createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -18099,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': {
@@ -18157,7 +18166,7 @@ function Reactions() {
       unified: reaction,
       showVariations: false,
       className: cx(styles$5.emojiButton),
-      round: true
+      noBackground: true
     }));
   }), createElement("li", null, createElement(BtnPlus, null)));
 }
@@ -18175,6 +18184,12 @@ var styles$5 = /*#__PURE__*/stylesheet.create({
     ':hover': {
       transform: 'scale(1.2)'
     },
+    ':focus': {
+      transform: 'scale(1.2)'
+    },
+    ':active': {
+      transform: 'scale(1.1)'
+    },
     transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });