emoji-picker-react 4.6.4 → 4.6.6-rc.1

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

@@ -44,6 +44,21 @@ function asSelectors() {
 }
 
 var stylesheet = /*#__PURE__*/flairup.createSheet('epr');
+var commonStyles = /*#__PURE__*/stylesheet.create({
+  hidden: {
+    '.': ClassNames.hidden,
+    display: 'none',
+    opacity: '0',
+    pointerEvents: 'none',
+    visibility: 'hidden'
+  },
+  hiddenOnSearch: {
+    display: 'none',
+    opacity: '0',
+    pointerEvents: 'none',
+    visibility: 'hidden'
+  }
+});
 
 function focusElement(element) {
   if (!element) {
@@ -18255,9 +18270,18 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: flairup.cx('epr-btn', props.className)
+    className: flairup.cx(styles.button, props.className)
   }), props.children);
 }
+var styles = /*#__PURE__*/stylesheet.create({
+  button: {
+    '.': 'epr-btn',
+    cursor: 'pointer',
+    border: '0',
+    background: 'none',
+    outline: 'none'
+  }
+});
 
 function ClickableEmojiButton(_ref) {
   var _cx;
@@ -18271,7 +18295,7 @@ function ClickableEmojiButton(_ref) {
       hasVariations = _ref.hasVariations,
       children = _ref.children;
   return React.createElement(Button, {
-    className: flairup.cx(ClassNames.emoji, (_cx = {}, _cx[ClassNames.hidden] = hidden, _cx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _cx)),
+    className: flairup.cx(ClassNames.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _cx)),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -18389,8 +18413,6 @@ function ClickableEmoji(_ref) {
 }
 
 function EmojiCategory(_ref) {
-  var _cx;
-
   var categoryConfig = _ref.categoryConfig,
       children = _ref.children,
       hidden = _ref.hidden,
@@ -18398,15 +18420,51 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
-    className: flairup.cx(ClassNames.category, (_cx = {}, _cx[ClassNames.hidden] = hidden, _cx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _cx)),
+    className: flairup.cx(styles$1.category, hidden && commonStyles.hidden, hiddenOnSearch && commonStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
-    className: ClassNames.label
+    className: flairup.cx(styles$1.label)
   }, categoryName), React.createElement("div", {
-    className: ClassNames.categoryContent
+    className: flairup.cx(styles$1.categoryContent)
   }, children));
 }
+var styles$1 = /*#__PURE__*/stylesheet.create({
+  category: {
+    '.': ClassNames.category,
+    ':not(:has(.epr-visible))': {
+      display: 'none'
+    }
+  },
+  categoryContent: {
+    '.': ClassNames.categoryContent,
+    display: 'grid',
+    gridGap: '0',
+    gridTemplateColumns: 'repeat(auto-fill, var(--epr-emoji-fullsize))',
+    justifyContent: 'space-between',
+    margin: 'var(--epr-category-padding)',
+    position: 'relative'
+  },
+  label: {
+    '.': ClassNames.label,
+    alignItems: 'center',
+    // @ts-expect-error - backdropFilter is a valid CSS property
+    backdropFilter: 'blur(3px)',
+    backgroundColor: 'var(--epr-category-label-bg-color)',
+    color: 'var(--epr-category-label-text-color)',
+    display: 'flex',
+    fontSize: '16px',
+    fontWeight: 'bold',
+    height: 'var(--epr-category-label-height)',
+    margin: '0',
+    padding: 'var(--epr-category-label-padding)',
+    position: 'sticky',
+    textTransform: 'capitalize',
+    top: '0',
+    width: '100%',
+    zIndex: 'var(--epr-category-label-z-index)'
+  }
+});
 
 function Suggested(_ref) {
   var categoryConfig = _ref.categoryConfig;
@@ -18449,7 +18507,7 @@ function EmojiList() {
   var categories = useCategoriesConfig();
   var renderdCategoriesCountRef = React.useRef(0);
   return React.createElement("ul", {
-    className: flairup.cx(styles.emojiList)
+    className: flairup.cx(styles$2.emojiList)
   }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
@@ -18531,7 +18589,7 @@ function RenderCategory(_ref) {
   }, emojis);
 }
 
-var styles = /*#__PURE__*/stylesheet.create({
+var styles$2 = /*#__PURE__*/stylesheet.create({
   emojiList: {
     '.': ClassNames.emojiList,
     listStyle: 'none',
@@ -18792,11 +18850,11 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return React.createElement("div", {
-    className: flairup.cx(styles$1.body),
+    className: flairup.cx(styles$3.body),
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
-var styles$1 = /*#__PURE__*/stylesheet.create({
+var styles$3 = /*#__PURE__*/stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
     flex: '1',
@@ -18895,6 +18953,7 @@ function useIsSkinToneInPreview() {
   return skinTonePickerLocationConfig === exports.SkinTonePickerLocation.PREVIEW;
 }
 
+var _stylesheet$create;
 var FlexDirection;
 
 (function (FlexDirection) {
@@ -18911,9 +18970,18 @@ function Flex(_ref) {
       direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return React.createElement("div", {
     style: _extends({}, style),
-    className: flairup.cx('Flex', className, direction)
+    className: flairup.cx(styles$4.flex, className, styles$4[direction])
   }, children);
 }
+var styles$4 = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
+  flex: {
+    display: 'flex'
+  }
+}, _stylesheet$create[FlexDirection.ROW] = {
+  flexDirection: 'row'
+}, _stylesheet$create[FlexDirection.COLUMN] = {
+  flexDirection: 'column'
+}, _stylesheet$create));
 
 function Space(_ref) {
   var className = _ref.className,
@@ -19045,7 +19113,7 @@ function Preview() {
   }
 
   return React.createElement(Flex, {
-    className: "epr-preview"
+    className: flairup.cx(styles$5.preview)
   }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
@@ -19089,12 +19157,28 @@ function PreviewBody() {
       size: 45,
       getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
-      className: "epr-preview-emoji-label"
+      className: flairup.cx(styles$5.label)
     }, emojiName(emoji)) : React.createElement("div", {
-      className: "epr-preview-emoji-label"
+      className: flairup.cx(styles$5.label)
     }, defaultText));
   }
 }
+var styles$5 = /*#__PURE__*/stylesheet.create({
+  preview: {
+    alignItems: 'center',
+    borderTop: '1px solid var(--epr-preview-border-color)',
+    height: 'var(--epr-preview-height)',
+    padding: '0 var(--epr-horizontal-padding)',
+    position: 'relative',
+    zIndex: 'var(--epr-preview-z-index)'
+  },
+  label: {
+    color: 'var(--epr-preview-text-color)',
+    fontSize: 'var(--epr-preview-text-size)',
+    padding: 'var(--epr-preview-text-padding)',
+    textTransform: 'capitalize'
+  }
+});
 
 function categoryNameFromDom($category) {
   var _$category$getAttribu;
@@ -19184,6 +19268,667 @@ function useShouldHideCustomEmojis() {
   return customCategoryConfig.length === 0;
 }
 
+var _g, _path, _path2, _ellipse, _ellipse2, _g2, _g3, _g4, _g5, _path3, _circle, _circle2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _ellipse3, _ellipse4, _ellipse5, _ellipse6, _ellipse7, _path11, _path12, _path13, _path14, _circle3, _circle4, _g6, _path15, _path16, _ellipse8, _ellipse9, _g7, _g8, _g9, _g10, _path17, _circle5, _circle6, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _ellipse10, _ellipse11, _ellipse12, _ellipse13, _ellipse14, _path25, _path26, _path27, _path28, _circle7, _circle8, _g11, _path29, _path30, _circle9, _circle10, _g12, _g13, _g14, _g15, _path31, _circle11, _circle12, _path32, _path33, _path34, _path35, _path36, _path37, _path38, _ellipse15, _ellipse16, _ellipse17, _ellipse18, _ellipse19, _path39, _path40, _path41, _path42, _circle13, _circle14, _g16, _path43, _path44, _circle15, _circle16, _g17, _g18, _g19, _g20, _path45, _circle17, _circle18, _path46, _path47, _path48, _path49, _path50, _path51, _path52, _ellipse20, _ellipse21, _ellipse22, _ellipse23, _ellipse24, _path53, _path54, _path55, _path56, _circle19, _circle20;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var SvgCategoryNav = function SvgCategoryNav(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 200,
+    height: 80
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    fill: "#3371B7",
+    stroke: "#3371B7",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.1
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.8 29.5c.6 0 1.1-.5 1.1-1.1s-.5-1.2-1.1-1.2-1.2.5-1.2 1.2c0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 23c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.6 31.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2s-.1.2 0 .4c.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 34.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zM7.2 29.5c.6 0 1.2-.5 1.2-1.1s-.5-1.2-1.2-1.2c-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z"
+  }))), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    d: "M64.1 33.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zM73.5 33.5h2.4c.2 0 .4.2.4.4v2c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2c0-.3.2-.4.4-.4zM63.7 28.4h12.6v5H63.7z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    d: "M65.5 23.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z"
+  })), _ellipse || (_ellipse = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 66.2,
+    cy: 30.9,
+    fill: "#3371B7",
+    rx: 0.9,
+    ry: 1
+  })), _ellipse2 || (_ellipse2 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 73.8,
+    cy: 30.9,
+    fill: "#3371B7",
+    rx: 0.9,
+    ry: 1
+  })), _g2 || (_g2 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#3371B7"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M96.4 30c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M96.3 28.6v.1c-.9.1-2.9.1-4.6-1.1-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1-.1-.1-.1-.1-.1-.2.5-.1 1.2-.2 2-.1 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.2.3.6.4.9zM84 32.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.8-.5-1.1z"
+  }))), _g3 || (_g3 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#3371B7"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "m116.3 26.8-1.4 2-.8-.8-.6-.6v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.6-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M110.1 27.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z"
+  }))), _g4 || (_g4 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#3371B7"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M126.8 34.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM137.6 34.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM126.8 24.4v9.9M137.7 24.4v9.9M126.8 23.5h10.8v2.7h-10.8z"
+  }))), _g5 || (_g5 = /*#__PURE__*/React.createElement("g", {
+    fill: "#3371B7"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M170.8 23.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.5 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M170.3 27.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4s.3.2.4.2h2.4c.4 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6h-1.8v-2.6"
+  }))), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    d: "M186.2 23.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.5 1.2-2.7 2.7-2.7z"
+  })), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 186,
+    cy: 28.9,
+    r: 0.7,
+    fill: "#3371B7"
+  })), _circle2 || (_circle2 = /*#__PURE__*/React.createElement("circle", {
+    cx: 194,
+    cy: 26.7,
+    r: 0.7,
+    fill: "#3371B7"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "m186 33.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    fill: "#3371B7",
+    stroke: "#3371B7",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.25,
+    d: "M156 24.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7s1.3-.3 1.3-.3c.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z"
+  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    d: "M48.1 23.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z"
+  })), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "M43.5 28.8c-.2.1-.5 1.2 0 1.5 1.4 1 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9"
+  })), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "m43.5 30.6-.2.4c-.2.5.2 1 .7.9.3-.1.5 0 .7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2q.6.3 1.2 0l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1"
+  })), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "M43.5 32.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.5.8-.9 0-.2-.2-.5-.4-.7"
+  })), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "M43.5 33.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4"
+  })), _ellipse3 || (_ellipse3 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 51.6,
+    cy: 26.5,
+    fill: "#3371B7",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse4 || (_ellipse4 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 25,
+    fill: "#3371B7",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse5 || (_ellipse5 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 27.2,
+    fill: "#3371B7",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse6 || (_ellipse6 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 54.3,
+    cy: 26.5,
+    fill: "#3371B7",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse7 || (_ellipse7 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 50.9,
+    cy: 25,
+    fill: "#3371B7",
+    rx: 0.3,
+    ry: 0.4
+  })), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    d: "M24.2 31v-7.6c.1.1.8.9 2.8 3.1 2.5-1.6 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z"
+  })), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "m21.2 30 5.4 1.2M21.2 34.1l5.4-1.2M38.8 30l-5.4 1.2M38.8 34.1l-5.4-1.2"
+  })), _path13 || (_path13 = /*#__PURE__*/React.createElement("path", {
+    fill: "#3371B7",
+    fillRule: "evenodd",
+    d: "m29.5 32.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3",
+    clipRule: "evenodd"
+  })), _path14 || (_path14 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#3371B7",
+    strokeLinecap: "round",
+    d: "m32.4 32.1-.1.2c-.4 1-1.8 1.1-2.3.2"
+  })), _circle3 || (_circle3 = /*#__PURE__*/React.createElement("circle", {
+    cx: 27.6,
+    cy: 29.7,
+    r: 0.7,
+    fill: "#3371B7"
+  })), _circle4 || (_circle4 = /*#__PURE__*/React.createElement("circle", {
+    cx: 32.4,
+    cy: 29.7,
+    r: 0.7,
+    fill: "#3371B7"
+  })), _g6 || (_g6 = /*#__PURE__*/React.createElement("g", {
+    fill: "#C0C0BF",
+    stroke: "#C0C0BF",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.1
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.8 49.5c.6 0 1.1-.5 1.1-1.1s-.5-1.2-1.1-1.2-1.2.5-1.2 1.2c0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4zM14.6 51.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2s-.1.2 0 .4c.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 54.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zM7.2 49.5c.6 0 1.2-.5 1.2-1.1s-.5-1.2-1.2-1.2c-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 43c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2z"
+  }))), _path15 || (_path15 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    d: "M64.1 53.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zM73.5 53.5h2.4c.2 0 .4.2.4.4v2c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2c0-.3.2-.4.4-.4zM63.7 48.4h12.6v5H63.7z"
+  })), _path16 || (_path16 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    d: "M65.5 43.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z"
+  })), _ellipse8 || (_ellipse8 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 66.2,
+    cy: 50.9,
+    fill: "#C0C0BF",
+    rx: 0.9,
+    ry: 1
+  })), _ellipse9 || (_ellipse9 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 73.8,
+    cy: 50.9,
+    fill: "#C0C0BF",
+    rx: 0.9,
+    ry: 1
+  })), _g7 || (_g7 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#C0C0BF"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M96.4 50c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M96.3 48.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.4.3.8.4 1.1zM84 52.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.8-.5-1.1z"
+  }))), _g8 || (_g8 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#C0C0BF"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "m116.3 46.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M110.1 47.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z"
+  }))), _g9 || (_g9 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#C0C0BF"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M126.8 54.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM137.6 54.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM126.8 44.4v9.9M137.7 44.4v9.9M126.8 43.5h10.8v2.7h-10.8z"
+  }))), _g10 || (_g10 = /*#__PURE__*/React.createElement("g", {
+    fill: "#C0C0BF"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M170.8 43.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.5 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M170.3 47.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4s.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.8v-2.6"
+  }))), _path17 || (_path17 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    d: "M186.2 43.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.4 1.2-2.7 2.7-2.7z"
+  })), _circle5 || (_circle5 = /*#__PURE__*/React.createElement("circle", {
+    cx: 186,
+    cy: 48.9,
+    r: 0.7,
+    fill: "#C0C0BF"
+  })), _circle6 || (_circle6 = /*#__PURE__*/React.createElement("circle", {
+    cx: 194,
+    cy: 46.7,
+    r: 0.7,
+    fill: "#C0C0BF"
+  })), _path18 || (_path18 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "m186 53.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8"
+  })), _path19 || (_path19 = /*#__PURE__*/React.createElement("path", {
+    fill: "#C0C0BF",
+    stroke: "#C0C0BF",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.25,
+    d: "M156 44.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7s1.3-.3 1.3-.3c.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z"
+  })), _path20 || (_path20 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    d: "M48.1 43.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z"
+  })), _path21 || (_path21 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "M43.5 48.8c-.2.1-.5 1.2 0 1.5 1.4 1 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9"
+  })), _path22 || (_path22 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "m43.5 50.6-.2.4c-.2.5.2 1 .7.9.3-.1.5 0 .7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2q.6.3 1.2 0l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1"
+  })), _path23 || (_path23 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "M43.5 52.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.5.8-.9 0-.2-.2-.5-.4-.7"
+  })), _path24 || (_path24 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "M43.5 53.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4"
+  })), _ellipse10 || (_ellipse10 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 51.6,
+    cy: 46.5,
+    fill: "#C0C0BF",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse11 || (_ellipse11 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 45,
+    fill: "#C0C0BF",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse12 || (_ellipse12 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 47.2,
+    fill: "#C0C0BF",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse13 || (_ellipse13 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 54.3,
+    cy: 46.5,
+    fill: "#C0C0BF",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse14 || (_ellipse14 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 50.9,
+    cy: 45,
+    fill: "#C0C0BF",
+    rx: 0.3,
+    ry: 0.4
+  })), _path25 || (_path25 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    d: "M24.2 51v-7.6c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z"
+  })), _path26 || (_path26 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "m21.2 50 5.4 1.2M21.2 54.1l5.4-1.2M38.8 50l-5.4 1.2M38.8 54.1l-5.4-1.2"
+  })), _path27 || (_path27 = /*#__PURE__*/React.createElement("path", {
+    fill: "#C0C0BF",
+    fillRule: "evenodd",
+    d: "m29.5 52.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3",
+    clipRule: "evenodd"
+  })), _path28 || (_path28 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#C0C0BF",
+    strokeLinecap: "round",
+    d: "m32.4 52.1-.1.2c-.4 1-1.8 1.1-2.3.2"
+  })), _circle7 || (_circle7 = /*#__PURE__*/React.createElement("circle", {
+    cx: 27.6,
+    cy: 49.7,
+    r: 0.7,
+    fill: "#C0C0BF"
+  })), _circle8 || (_circle8 = /*#__PURE__*/React.createElement("circle", {
+    cx: 32.4,
+    cy: 49.7,
+    r: 0.7,
+    fill: "#C0C0BF"
+  })), _g11 || (_g11 = /*#__PURE__*/React.createElement("g", {
+    fill: "#6AA9DD",
+    stroke: "#6AA9DD",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.1
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.6 71.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2s-.1.2 0 .4c.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 74.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zM12.8 69.5c.6 0 1.1-.5 1.1-1.1s-.5-1.2-1.1-1.2-1.2.5-1.2 1.2c0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4zM7.2 69.5c.6 0 1.2-.5 1.2-1.1s-.5-1.2-1.2-1.2c-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 63c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2z"
+  }))), _path29 || (_path29 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    d: "M64.1 73.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zM73.5 73.5h2.4c.2 0 .4.2.4.4V76c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2.1c0-.3.2-.4.4-.4zM63.7 68.4h12.6v5H63.7z"
+  })), _path30 || (_path30 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    d: "M65.5 63.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z"
+  })), _circle9 || (_circle9 = /*#__PURE__*/React.createElement("circle", {
+    cx: 66.2,
+    cy: 70.9,
+    r: 0.9,
+    fill: "#6AA9DD"
+  })), _circle10 || (_circle10 = /*#__PURE__*/React.createElement("circle", {
+    cx: 73.8,
+    cy: 70.9,
+    r: 0.9,
+    fill: "#6AA9DD"
+  })), _g12 || (_g12 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#6AA9DD"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M96.4 70c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M96.3 68.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1.1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.5.3.9.4 1.2zM84 72.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.9-.5-1.1z"
+  }))), _g13 || (_g13 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#6AA9DD"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "m116.3 66.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M110.1 67.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z"
+  }))), _g14 || (_g14 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#6AA9DD"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M126.8 74.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM137.6 74.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM126.8 64.4v9.9M137.7 64.4v9.9M126.8 63.5h10.8v2.7h-10.8z"
+  }))), _g15 || (_g15 = /*#__PURE__*/React.createElement("g", {
+    fill: "#6AA9DD"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M170.8 63.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.4 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M170.3 67.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4s.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.7-.6h-1.8v-.2z"
+  }))), _path31 || (_path31 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    d: "M186.2 63.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.4 1.2-2.7 2.7-2.7z"
+  })), _circle11 || (_circle11 = /*#__PURE__*/React.createElement("circle", {
+    cx: 186,
+    cy: 68.9,
+    r: 0.7,
+    fill: "#6AA9DD"
+  })), _circle12 || (_circle12 = /*#__PURE__*/React.createElement("circle", {
+    cx: 194,
+    cy: 66.7,
+    r: 0.7,
+    fill: "#6AA9DD"
+  })), _path32 || (_path32 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "m186 73.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8"
+  })), _path33 || (_path33 = /*#__PURE__*/React.createElement("path", {
+    fill: "#6AA9DD",
+    stroke: "#6AA9DD",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.25,
+    d: "M156 64.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7s1.3-.3 1.3-.3c.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z"
+  })), _path34 || (_path34 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    d: "M48.1 63.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z"
+  })), _path35 || (_path35 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "M43.5 68.8c-.2.1-.5 1.2 0 1.5 1.4.9 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9"
+  })), _path36 || (_path36 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "m43.5 70.6-.2.4c-.2.5.2 1 .7.9.3-.1.5.1.7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.2 1.2-.1l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1"
+  })), _path37 || (_path37 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "M43.5 72.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.4.8-.9 0-.2-.2-.5-.4-.7"
+  })), _path38 || (_path38 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "M43.5 73.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4"
+  })), _ellipse15 || (_ellipse15 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 51.6,
+    cy: 66.5,
+    fill: "#6AA9DD",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse16 || (_ellipse16 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 65,
+    fill: "#6AA9DD",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse17 || (_ellipse17 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 67.2,
+    fill: "#6AA9DD",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse18 || (_ellipse18 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 54.3,
+    cy: 66.5,
+    fill: "#6AA9DD",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse19 || (_ellipse19 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 50.9,
+    cy: 65,
+    fill: "#6AA9DD",
+    rx: 0.3,
+    ry: 0.4
+  })), _path39 || (_path39 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    d: "M24.2 71v-7.6c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z"
+  })), _path40 || (_path40 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "m21.2 70.1 5.4 1.2M21.2 74.1l5.4-1.2M38.8 70.1l-5.4 1.2M38.8 74.1l-5.4-1.2"
+  })), _path41 || (_path41 = /*#__PURE__*/React.createElement("path", {
+    fill: "#6AA9DD",
+    fillRule: "evenodd",
+    d: "m29.5 72.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3",
+    clipRule: "evenodd"
+  })), _path42 || (_path42 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#6AA9DD",
+    strokeLinecap: "round",
+    d: "m32.4 72.1-.1.2c-.4 1-1.8 1.1-2.3.2"
+  })), _circle13 || (_circle13 = /*#__PURE__*/React.createElement("circle", {
+    cx: 27.6,
+    cy: 69.7,
+    r: 0.7,
+    fill: "#6AA9DD"
+  })), _circle14 || (_circle14 = /*#__PURE__*/React.createElement("circle", {
+    cx: 32.4,
+    cy: 69.7,
+    r: 0.7,
+    fill: "#6AA9DD"
+  })), _g16 || (_g16 = /*#__PURE__*/React.createElement("g", {
+    fill: "#868686",
+    stroke: "#868686",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.1
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.8 9.5c.6 0 1.1-.5 1.1-1.2 0-.6-.5-1.1-1.1-1.1s-1.2.5-1.2 1.1.6 1.2 1.2 1.2zm0-1.6c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4.2-.4.4-.4zM7.2 9.5c.6 0 1.2-.5 1.2-1.2 0-.6-.5-1.1-1.2-1.1-.6 0-1.1.5-1.1 1.1s.5 1.2 1.1 1.2zm0-1.6c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4.2-.4.4-.4zM14.6 11.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2s-.1.2 0 .4c.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.2.1-.3 0-.4zM10 14.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 3c-3.8 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2S6.6 3.8 10 3.8s6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2z"
+  }))), _path43 || (_path43 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    d: "M64.1 13.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zM73.5 13.4h2.4c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2.1c0-.2.2-.4.4-.4zM63.7 8.4h12.6v5H63.7z"
+  })), _path44 || (_path44 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    d: "M65.5 3.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7V5.5c0-1.1.8-1.9 1.8-1.9z"
+  })), _circle15 || (_circle15 = /*#__PURE__*/React.createElement("circle", {
+    cx: 66.2,
+    cy: 10.9,
+    r: 0.9,
+    fill: "#868686"
+  })), _circle16 || (_circle16 = /*#__PURE__*/React.createElement("circle", {
+    cx: 73.8,
+    cy: 10.9,
+    r: 0.9,
+    fill: "#868686"
+  })), _g17 || (_g17 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#868686"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M96.4 10c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M96.3 8.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1.1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.5.3.9.4 1.2zM84 12.1V12c.9-.2 2.9-.4 4.7.6 1.1.6 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8-1.1-.6-1.9-1.6-2.4-2.5-.3-.4-.4-.8-.5-1.1z"
+  }))), _g18 || (_g18 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#868686"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "m116.3 6.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M110.1 7.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z"
+  }))), _g19 || (_g19 = /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: "#868686"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M126.8 14.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM137.6 14.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zM126.8 4.4v9.9M137.7 4.4v9.9M126.8 3.5h10.8v2.7h-10.8z"
+  }))), _g20 || (_g20 = /*#__PURE__*/React.createElement("g", {
+    fill: "#868686"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M170.8 3.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.4 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.3c-.2 3.8 2.6 7.1 6.3 7.4 3.9.4 7.3-2.6 7.6-6.5.3-3.6-2.5-6.9-6.1-7.3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M170.3 7.4c0-.3-.3-.6-.6-.6s-.7.3-.7.6v3.2c0 .2.1.3.2.4s.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.8v-.2z"
+  }))), _path45 || (_path45 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    d: "M186.2 3.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7V6.1c-.1-1.5 1.2-2.7 2.7-2.7z"
+  })), _circle17 || (_circle17 = /*#__PURE__*/React.createElement("circle", {
+    cx: 186,
+    cy: 8.9,
+    r: 0.7,
+    fill: "#868686"
+  })), _circle18 || (_circle18 = /*#__PURE__*/React.createElement("circle", {
+    cx: 194,
+    cy: 6.7,
+    r: 0.7,
+    fill: "#868686"
+  })), _path46 || (_path46 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "m186 13.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8"
+  })), _path47 || (_path47 = /*#__PURE__*/React.createElement("path", {
+    fill: "#868686",
+    stroke: "#868686",
+    strokeMiterlimit: 10,
+    strokeWidth: 0.25,
+    d: "M156 4.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.1s-2.4-.1-3.8-.6c-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7s1.3-.3 1.3-.3c.2-.1.3-.2.3-.4V4.7c-.3-.2-.4-.3-.5-.4zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1V4.7c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z"
+  })), _path48 || (_path48 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    d: "M48.1 3.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z"
+  })), _path49 || (_path49 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "M43.5 8.7c-.2.1-.5 1.2 0 1.5 1.4.9 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9"
+  })), _path50 || (_path50 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "m43.5 10.6-.2.4c-.2.5.2 1 .7.9.3-.1.5.1.7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3q.6.15 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.1 1.2-.1l.2-.1c.3-.2.8-.1 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.4.5 0 1.2-.3 1.1-.7l-.4-1.1"
+  })), _path51 || (_path51 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "M43.5 12.1c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.4.8-.9 0-.2-.2-.5-.4-.7"
+  })), _path52 || (_path52 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "M43.5 13.3c0 .5.6 2.4 1.3 2.6 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4"
+  })), _ellipse20 || (_ellipse20 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 51.6,
+    cy: 6.5,
+    fill: "#868686",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse21 || (_ellipse21 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 4.9,
+    fill: "#868686",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse22 || (_ellipse22 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 53,
+    cy: 7.2,
+    fill: "#868686",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse23 || (_ellipse23 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 54.3,
+    cy: 6.5,
+    fill: "#868686",
+    rx: 0.3,
+    ry: 0.4
+  })), _ellipse24 || (_ellipse24 = /*#__PURE__*/React.createElement("ellipse", {
+    cx: 50.9,
+    cy: 4.9,
+    fill: "#868686",
+    rx: 0.3,
+    ry: 0.4
+  })), _path53 || (_path53 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    d: "M24.2 11V3.5c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.7-.6-1.7-.6-2.6z"
+  })), _path54 || (_path54 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "m21.2 10 5.4 1.2M21.2 14.1l5.4-1.2M38.8 10l-5.4 1.2M38.8 14.1l-5.4-1.2"
+  })), _path55 || (_path55 = /*#__PURE__*/React.createElement("path", {
+    fill: "#868686",
+    fillRule: "evenodd",
+    d: "m29.5 12.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.6 1.2.8 1.6.3",
+    clipRule: "evenodd"
+  })), _path56 || (_path56 = /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: "#868686",
+    strokeLinecap: "round",
+    d: "m32.4 12.1-.1.2c-.4 1-1.8 1.1-2.3.2"
+  })), _circle19 || (_circle19 = /*#__PURE__*/React.createElement("circle", {
+    cx: 27.6,
+    cy: 9.7,
+    r: 0.7,
+    fill: "#868686"
+  })), _circle20 || (_circle20 = /*#__PURE__*/React.createElement("circle", {
+    cx: 32.4,
+    cy: 9.7,
+    r: 0.7,
+    fill: "#868686"
+  })));
+};
+
 function CategoryNavigation() {
   var _useState = React.useState(null),
       activeCategory = _useState[0],
@@ -19196,7 +19941,7 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: "epr-category-nav",
+    className: flairup.cx(styles$6.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
@@ -19213,7 +19958,7 @@ function CategoryNavigation() {
 
     return React.createElement(Button, {
       tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
-      className: flairup.cx('epr-cat-btn', "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+      className: flairup.cx(styles$6.catBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
       key: category,
       onClick: function onClick() {
         setActiveCategory(category);
@@ -19226,6 +19971,51 @@ function CategoryNavigation() {
     });
   }));
 }
+var styles$6 = /*#__PURE__*/stylesheet.create({
+  nav: {
+    '.': 'epr-category-nav',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 'var(--epr-header-padding)'
+  },
+  '.epr-search-active': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  '.epr-main:has(input:not(:placeholder-shown))': {
+    nav: {
+      opacity: '0.3',
+      cursor: 'default',
+      pointerEvents: 'none'
+    }
+  },
+  catBtn: {
+    '.': 'epr-cat-btn',
+    display: 'inline-block',
+    transition: 'opacity 0.2s ease-in-out',
+    position: 'relative',
+    height: 'var(--epr-category-navigation-button-size)',
+    width: 'var(--epr-category-navigation-button-size)',
+    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
+    outline: 'none',
+    backgroundImage: "url(" + SvgCategoryNav + ")",
+    backgroundPosition: '0 0',
+    ':focus:before': {
+      content: '',
+      position: 'absolute',
+      top: '-2px',
+      left: '-2px',
+      right: '-2px',
+      bottom: '-2px',
+      border: '2px solid var(--epr-category-icon-active-color)',
+      borderRadius: '50%'
+    }
+  }
+});
 
 var SCOPE = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
 var EMOJI_BUTTON = /*#__PURE__*/['button', asSelectors(ClassNames.emoji)].join('');
@@ -19254,10 +20044,10 @@ function SearchContainer() {
   }
 
   return React.createElement(Flex, {
-    className: flairup.cx(styles$2.overlay)
+    className: flairup.cx(styles$7.overlay)
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
-var styles$2 = /*#__PURE__*/stylesheet.create({
+var styles$7 = /*#__PURE__*/stylesheet.create({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'
@@ -19829,13 +20619,28 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   return React.createElement("aside", {
-    className: flairup.cx(styles$3.main, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _cx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _cx), className),
+    className: flairup.cx(styles$8.main, styles$8.baseVariables, theme === exports.Theme.DARK && styles$8.darkTheme, theme === exports.Theme.AUTO && styles$8.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), className),
     ref: PickerMainRef,
     style: style
   }, children);
 }
 
-var styles$3 = /*#__PURE__*/stylesheet.create({
+var DarkTheme = {
+  '--epr-emoji-variation-picker-bg-color': 'var(--epr-dark-emoji-variation-picker-bg-color)',
+  '--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)',
+  '--epr-focus-bg-color': 'var(--epr-dark-focus-bg-color)',
+  '--epr-search-input-bg-color': 'var(--epr-dark-search-input-bg-color)',
+  '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
+  '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
+  '--epr-bg-color': 'var(--epr-dark-bg-color)',
+  '--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)'
+};
+var styles$8 = /*#__PURE__*/stylesheet.create({
   main: {
     '.': ['epr-main', ClassNames.emojiPicker],
     position: 'relative',
@@ -19844,7 +20649,105 @@ var styles$3 = /*#__PURE__*/stylesheet.create({
     borderWidth: '1px',
     borderStyle: 'solid',
     borderRadius: 'var(--epr-picker-border-radius)',
-    borderColor: 'var(--epr-picker-border-color)'
+    borderColor: 'var(--epr-picker-border-color)',
+    backgroundColor: 'var(--epr-bg-color)',
+    overflow: 'hidden'
+  },
+  baseVariables: {
+    '--': {
+      '--epr-highlight-color': '#007aeb',
+      '--epr-hover-bg-color': '#f1f8ff',
+      '--epr-focus-bg-color': '#e0f0ff',
+      '--epr-text-color': '#858585',
+      '--epr-search-input-bg-color': '#f6f6f6',
+      '--epr-picker-border-color': '#e7e7e7',
+      '--epr-bg-color': '#fff',
+      '--epr-category-icon-active-color': '#6aa8de',
+      '--epr-skin-tone-picker-menu-color': '#ffffff95',
+      '--epr-horizontal-padding': '10px',
+      '--epr-picker-border-radius': '8px',
+
+      /* Header */
+      '--epr-search-border-color': 'var(--epr-highlight-color)',
+      '--epr-header-padding': '15px var(--epr-horizontal-padding)',
+
+      /* Skin Tone Picker */
+      '--epr-active-skin-tone-indicator-border-color': 'var(--epr-highlight-color)',
+      '--epr-active-skin-hover-color': 'var(--epr-hover-bg-color)',
+
+      /* Search */
+      '--epr-search-input-bg-color-active': 'var(--epr-search-input-bg-color)',
+      '--epr-search-input-padding': '0 30px',
+      '--epr-search-input-border-radius': '8px',
+      '--epr-search-input-height': '40px',
+      '--epr-search-input-text-color': 'var(--epr-text-color)',
+      '--epr-search-input-placeholder-color': 'var(--epr-text-color)',
+      '--epr-search-bar-inner-padding': 'var(--epr-horizontal-padding)',
+
+      /*  Category Navigation */
+      '--epr-category-navigation-button-size': '30px',
+
+      /* Variation Picker */
+      '--epr-emoji-variation-picker-height': '45px',
+      '--epr-emoji-variation-picker-bg-color': 'var(--epr-bg-color)',
+
+      /*  Preview */
+      '--epr-preview-height': '70px',
+      '--epr-preview-text-size': '14px',
+      '--epr-preview-text-padding': '0 var(--epr-horizontal-padding)',
+      '--epr-preview-border-color': 'var(--epr-picker-border-color)',
+      '--epr-preview-text-color': 'var(--epr-text-color)',
+
+      /* Category */
+      '--epr-category-padding': '0 var(--epr-horizontal-padding)',
+
+      /*  Category Label */
+      '--epr-category-label-bg-color': '#ffffffe6',
+      '--epr-category-label-text-color': 'var(--epr-text-color)',
+      '--epr-category-label-padding': '0 var(--epr-horizontal-padding)',
+      '--epr-category-label-height': '40px',
+
+      /*  Emoji */
+      '--epr-emoji-size': '30px',
+      '--epr-emoji-padding': '5px',
+      '--epr-emoji-fullsize': 'calc(var(--epr-emoji-size) + var(--epr-emoji-padding) * 2)',
+      '--epr-emoji-hover-color': 'var(--epr-hover-bg-color)',
+      '--epr-emoji-variation-indicator-color': 'var(--epr-picker-border-color)',
+      '--epr-emoji-variation-indicator-color-hover': 'var(--epr-text-color)',
+
+      /* Z-Index */
+      '--epr-header-overlay-z-index': '3',
+      '--epr-emoji-variations-indictator-z-index': '1',
+      '--epr-category-label-z-index': '2',
+      '--epr-skin-variation-picker-z-index': '5',
+      '--epr-preview-z-index': '6',
+
+      /* Dark Theme Variables */
+      '--epr-dark': '#000',
+      '--epr-dark-emoji-variation-picker-bg-color': 'var(--epr-dark)',
+      '--epr-dark-highlight-color': '#c0c0c0',
+      '--epr-dark-text-color': 'var(--epr-highlight-color)',
+      '--epr-dark-hover-bg-color': '#363636f6',
+      '--epr-dark-focus-bg-color': '#474747',
+      '--epr-dark-search-input-bg-color': '#333333',
+      '--epr-dark-category-label-bg-color': '#222222e6',
+      '--epr-dark-picker-border-color': '#151617',
+      '--epr-dark-bg-color': '#222222',
+      '--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'
+    }
+  },
+  autoThemeDark: {
+    '.': ClassNames.autoTheme,
+    '@media (prefers-color-scheme: dark)': {
+      '--': DarkTheme
+    }
+  },
+  darkTheme: {
+    '.': ClassNames.darkTheme,
+    '--': DarkTheme
   }
 });