emoji-picker-react 4.0.0-rc.21 → 4.0.0-rc.22

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

@@ -16079,7 +16079,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".EmojiPickerReact button.epr-emoji{border-radius:8px;padding:var(--epr-emoji-padding);position:relative}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:\"\";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact button.epr-emoji>.epr-emoji-img{font-size:0}.EmojiPickerReact button.epr-emoji>.epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus-visible{background-color:var(--epr-focus-bg-color)}";
+var css_248z = ".EmojiPickerReact button.epr-emoji{border-radius:8px;height:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding);position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:\"\";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact button.epr-emoji>.epr-emoji-img{font-size:0}.EmojiPickerReact button.epr-emoji>.epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus-visible{background-color:var(--epr-focus-bg-color)}@supports not selector(:focus-visible){.EmojiPickerReact button.epr-emoji:focus{background-color:var(--epr-focus-bg-color)}}";
 styleInject(css_248z);
 
 function Emoji(_ref) {
@@ -16680,7 +16680,7 @@ function Search() {
   }) : null);
 }
 
-var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus-visible{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
+var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus-visible{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}@supports not selector(:focus-visible){.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
 styleInject(css_248z$9);
 
 function SkinTonePicker() {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-rc.21",
+  "version": "4.0.0-rc.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/emoji/Emoji.css

@@ -2,6 +2,8 @@
   position: relative;
   padding: var(--epr-emoji-padding);
   border-radius: 8px;
+  width: var(--epr-emoji-fullsize);
+  height: var(--epr-emoji-fullsize);
 }
 
 .EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after {
@@ -47,3 +49,9 @@
 .EmojiPickerReact button.epr-emoji:focus-visible {
   background-color: var(--epr-focus-bg-color);
 }
+
+@supports not selector(: focus-visible) {
+  .EmojiPickerReact button.epr-emoji:focus {
+    background-color: var(--epr-focus-bg-color);
+  }
+}

package/src/components/header/SkinTonePicker.css

@@ -54,6 +54,12 @@
   box-shadow: 0 0 0 5px var(--epr-focus-bg-color);
 }
 
+@supports not selector(: focus-visible) {
+  .EmojiPickerReact .epr-skin-tones .epr-tone:focus {
+    box-shadow: 0 0 0 5px var(--epr-focus-bg-color);
+  }
+}
+
 .EmojiPickerReact
   .epr-skin-tones.open
   .epr-skin-tone-select