emoji-picker-react 4.12.0 → 4.12.1

package/dist/emoji-picker-react.cjs.development.js

@@ -18185,7 +18185,9 @@ var DarkTheme = {
   '--epr-search-input-bg-color-active': 'var(--epr-dark-search-input-bg-color-active)',
   '--epr-emoji-variation-indicator-color': 'var(--epr-dark-emoji-variation-indicator-color)',
   '--epr-category-icon-active-color': 'var(--epr-dark-category-icon-active-color)',
-  '--epr-skin-tone-picker-menu-color': 'var(--epr-dark-skin-tone-picker-menu-color)'
+  '--epr-skin-tone-picker-menu-color': 'var(--epr-dark-skin-tone-picker-menu-color)',
+  '--epr-skin-tone-outer-border-color': 'var(--epr-dark-skin-tone-outer-border-color)',
+  '--epr-skin-tone-inner-border-color': 'var(--epr-dark-skin-tone-inner-border-color)'
 };
 var styles = /*#__PURE__*/stylesheet.create({
   main: {
@@ -18208,8 +18210,8 @@ var styles = /*#__PURE__*/stylesheet.create({
   baseVariables: {
     '--': {
       '--epr-highlight-color': '#007aeb',
-      '--epr-hover-bg-color': '#f1f8ff',
-      '--epr-hover-bg-color-reduced-opacity': '#f1f8ff80',
+      '--epr-hover-bg-color': '#e5f0fa',
+      '--epr-hover-bg-color-reduced-opacity': '#e5f0fa80',
       '--epr-focus-bg-color': '#e0f0ff',
       '--epr-text-color': '#858585',
       '--epr-search-input-bg-color': '#f6f6f6',
@@ -18218,6 +18220,8 @@ var styles = /*#__PURE__*/stylesheet.create({
       '--epr-reactions-bg-color': '#ffffff90',
       '--epr-category-icon-active-color': '#6aa8de',
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
+      '--epr-skin-tone-outer-border-color': '#555555',
+      '--epr-skin-tone-inner-border-color': 'var(--epr-bg-color)',
       '--epr-horizontal-padding': '10px',
       '--epr-picker-border-radius': '8px',
       /* Header */
@@ -18281,7 +18285,9 @@ var styles = /*#__PURE__*/stylesheet.create({
       '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
       '--epr-dark-emoji-variation-indicator-color': '#444',
       '--epr-dark-category-icon-active-color': '#3271b7',
-      '--epr-dark-skin-tone-picker-menu-color': '#22222295'
+      '--epr-dark-skin-tone-picker-menu-color': '#22222295',
+      '--epr-dark-skin-tone-outer-border-color': 'var(--epr-dark-picker-border-color)',
+      '--epr-dark-skin-tone-inner-border-color': '#00000000'
     }
   },
   autoThemeDark: {
@@ -19745,7 +19751,6 @@ function BtnSkinToneVariation(_ref) {
     style: style,
     onClick: onClick,
     className: flairup.cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
-    tabIndex: isOpen ? 0 : -1,
     "aria-pressed": isActive,
     "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
   });
@@ -19762,8 +19767,19 @@ var styles$c = /*#__PURE__*/stylesheet.create({
   },
   tone: {
     '.': 'epr-tone',
+    width: 'var(--epr-skin-tone-size)',
+    display: 'block',
+    cursor: 'pointer',
+    borderRadius: '4px',
+    height: 'var(--epr-skin-tone-size)',
+    position: 'absolute',
+    right: '0',
+    transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
+    zIndex: '0',
+    border: '1px solid var(--epr-skin-tone-outer-border-color)',
+    boxShadow: 'inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
     ':hover': {
-      boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color)'
+      boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)'
     },
     ':focus': {
       boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
@@ -19890,14 +19906,7 @@ var styles$d = /*#__PURE__*/stylesheet.create({
     // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(5px)',
     background: 'var(--epr-skin-tone-picker-menu-color)',
-    '.epr-active:after': {
-      content: '',
-      position: 'absolute',
-      top: '-2px',
-      left: '-2px',
-      right: '-2px',
-      bottom: '-2px',
-      borderRadius: '5px',
+    '.epr-active': {
       border: '1px solid var(--epr-active-skin-tone-indicator-border-color)'
     }
   },
@@ -19905,19 +19914,7 @@ var styles$d = /*#__PURE__*/stylesheet.create({
     '.': 'epr-skin-tone-select',
     position: 'relative',
     width: 'var(--epr-skin-tone-size)',
-    height: 'var(--epr-skin-tone-size)',
-    '> button': {
-      width: 'var(--epr-skin-tone-size)',
-      display: 'block',
-      cursor: 'pointer',
-      borderRadius: '4px',
-      height: 'var(--epr-skin-tone-size)',
-      position: 'absolute',
-      right: '0',
-      transition: 'transform 0.3s ease-in-out, opacity 0.35s ease-in-out',
-      zIndex: '0',
-      boxShadow: '0 0 0 0px var(--epr-active-skin-hover-color)'
-    }
+    height: 'var(--epr-skin-tone-size)'
   }
 });