@fibery/ui-kit 1.10.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -23,7 +23,7 @@
     "src/tooltip.tsx",
     "src/BackButton.tsx",
     "src/Button",
-    "src/emoji-mart/*.ts*"
+    "src/emoji-mart/**/*.ts*"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -59,8 +59,8 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/react": "1.0.2",
-    "@fibery/helpers": "1.0.4"
+    "@fibery/helpers": "1.0.4",
+    "@fibery/react": "1.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -93,8 +93,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.3.0"
+    "@fibery/eslint-config": "8.3.0",
+    "@fibery/babel-preset": "7.2.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/Button/button.tsx

@@ -38,10 +38,10 @@ const HorizontalPaddings = {
 } as const;
 
 const IconSizes = {
-  ":button-size/super-small": 16,
-  ":button-size/small": 18,
-  ":button-size/normal": 20,
-  ":button-size/big": 22,
+  ":button-size/super-small": 14,
+  ":button-size/small": 18, // if you want to change it please ping Alex T.
+  ":button-size/normal": 18,
+  ":button-size/big": 20,
 };
 
 type StyledProps = {
@@ -111,7 +111,9 @@ const getIconMagicConstants = _.memoize((size: ButtonSize) => {
   const leftContainerSize = 8;
   const leftContainerMarginRight = iconSize - leftContainerSize;
 
-  return {iconSize, leftContainerSize, leftContainerMarginRight};
+  const spinnerSize = Math.round(iconSize * 0.8);
+
+  return {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight};
 });
 
 const shortcutStyle = css`
@@ -169,10 +171,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   const spinnerBgColor = getOpacities(textColor).opacity25;
   const spinnerColor = getSpinnerColor({mainColor, primary: baseProps.primary});
 
-  const {iconSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
+  const {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
 
   const leftContainer = pending ? (
-    <Spinner backgroundColor={spinnerBgColor} color={spinnerColor} size={iconSize} containerSize={leftContainerSize} />
+    <Spinner
+      backgroundColor={spinnerBgColor}
+      color={spinnerColor}
+      size={spinnerSize}
+      containerSize={leftContainerSize}
+    />
   ) : Icon ? (
     <Icon color={textColor} iconSize={iconSize} containerSize={leftContainerSize} />
   ) : null;

package/src/designSystem.ts

@@ -18,6 +18,7 @@ import {
 } from "./Pallete";
 import _ from "lodash";
 import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
+import {a11yColor} from "./a11y-color";
 
 export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
 
@@ -107,6 +108,7 @@ const lightColors = {
   mode: "light",
   brandColors,
   stateColors,
+  primaryBlue: indigo.indigo10,
   whiteColor: whiteA.whiteA0,
   blackColor: blackA.blackA0,
   mainBg: slate.slate2,
@@ -153,6 +155,7 @@ const lightColors = {
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
   inputPlaceholderTextColor: slate.slate9,
+  buttonPrimaryColor: indigo.indigo10,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
   checkboxColor: slate.slate10,
@@ -256,6 +259,22 @@ const lightColors = {
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slate.slate1,
   colorPickerSwatchBorder: blackA.blackA7,
+  richTextTableBorder: blackA.blackA5,
+  // GRID
+  // header
+  gridHeaderBgColor: slate.slate2,
+  gridHeaderHoverBgColor: slate.slate3,
+  gridHeaderTextColor: slate.slate9,
+  // cell
+  gridCellBgColor: whiteA.whiteA0,
+  gridCellBorderColor: slate.slate4,
+  gridPinnedCellBorderColor: slate.slate8,
+  gridDisabledCellBgColor: slate.slate2,
+  gridSelectedCellBgColor: indigo.indigo3,
+  gridSelectedCellBorderColor: indigo.indigo5,
+  gridSelectedPinnedCellBorderColor: indigo.indigo7,
+  gridDisabledSelectedCellBgColor: indigo.indigo4,
+  gridActiveCellBorderColor: indigo.indigo8,
 } as const;
 
 const darkMenu = {
@@ -281,6 +300,7 @@ const darkColors = {
   mode: "dark",
   brandColors,
   stateColors,
+  primaryBlue: indigoDark.indigo10,
   whiteColor: whiteA.whiteA0,
   blackColor: blackA.blackA0,
   mainBg: slateDark.slate1,
@@ -318,6 +338,7 @@ const darkColors = {
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
   inputPlaceholderTextColor: slateDark.slate9,
+  buttonPrimaryColor: indigoDark.indigo10,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
   checkboxColor: slateDark.slate10,
@@ -418,10 +439,28 @@ const darkColors = {
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slateDark.slate2,
   colorPickerSwatchBorder: blackA.blackA7,
+  richTextTableBorder: whiteA.whiteA7,
+  // GRID
+  // header
+  gridHeaderBgColor: slateDark.slate3,
+  gridHeaderHoverBgColor: slateDark.slate4,
+  gridHeaderTextColor: slateDark.slate10,
+  // cell
+  gridCellBgColor: slateDark.slate2,
+  gridCellBorderColor: slateDark.slate5,
+  gridPinnedCellBorderColor: slateDark.slate8,
+  gridDisabledCellBgColor: slateDark.slate3,
+  gridSelectedCellBgColor: indigoDark.indigo3,
+  gridSelectedCellBorderColor: indigoDark.indigo6,
+  gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
+  gridDisabledSelectedCellBgColor: indigoDark.indigo5,
+  gridActiveCellBorderColor: indigoDark.indigo9,
   ...darkMenu,
 } as const;
 
 export function getLightColors(): typeof lightColors {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   if (process.env.NODE_ENV !== "test") {
     throw new Error("Only for test purpose");
   }
@@ -429,6 +468,8 @@ export function getLightColors(): typeof lightColors {
 }
 
 export function getDarkColors(): typeof darkColors {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   if (process.env.NODE_ENV !== "test") {
     throw new Error("Only for test purpose");
   }
@@ -436,6 +477,8 @@ export function getDarkColors(): typeof darkColors {
 }
 
 export function getLight2Colors(): typeof light2Colors {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   if (process.env.NODE_ENV !== "test") {
     throw new Error("Only for test purpose");
   }
@@ -545,18 +588,46 @@ export const getLinkedHighlightBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+// REMOVE AFTER MIGRATION ON BACKEND
+export const migrateEnumColor = (color: string) => {
+  const pastelIdx = pastelColors.indexOf(color);
+
+  if (pastelIdx > -1) {
+    return cardTypeColors[pastelIdx];
+  }
+
+  return color;
+};
+
 export const getEnumBackgroundColor = _.memoize(
-  (themeMode: ThemeMode, color: string) => {
-    switch (themeMode) {
-      case "dark":
-        return makeChromaColor(color).darken(2.2).alpha(0.5).saturate(1).css();
-      default:
-        return color;
-    }
+  (mode: ThemeMode, color: string) => {
+    const migratedColor = migrateEnumColor(color);
+
+    return getThemeValue(mode, {
+      light: a11yColor(getOpacities(migratedColor).opacity20, lightColors.whiteColor, 1),
+      dark: a11yColor(getOpacities(migratedColor).opacity30, darkColors.menuBg, 1.3),
+    });
   },
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+// TODO: fix color for light2. It should same as 'dark' only on dark menu but same as 'light' on other parts of application
+export const getAppIconBackgroundColor = (mode: ThemeMode, color: string) =>
+  getThemeValue(mode, {
+    dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
+    light: a11yColor(getOpacities(color).opacity15, lightColors.whiteColor, 1),
+    light2: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
+  });
+
+export const getIconColor = _.memoize(
+  (mode: ThemeMode, color: string) =>
+    getThemeValue(mode, {
+      light: a11yColor(getOpacities(color).opacity95, lightColors.whiteColor, 3),
+      dark: a11yColor(getOpacities(color).opacity95, darkColors.menuBg, 5),
+    }),
+  (themeMode, color) => `${themeMode}-${color}`
+);
+
 export const cardTypeColors = [
   "#4A4A4A",
   "#6A849B",
@@ -577,7 +648,7 @@ export const cardTypeColors = [
   "#B04E31",
 ] as const;
 
-export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
+const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
 
 export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
 export const colors = {

package/src/emoji-mart/app-icon-picker.tsx

@@ -1,12 +1,13 @@
 import {forwardRef, useMemo} from "react";
-import {EmojiMartWrapper, NimblePicker, PickerProps} from "./emoji-mart";
+import {getThemedUrl} from "../AppIconWithFallback";
 import {useThemeMode} from "../ThemeProvider";
-import {alignTheme} from "../theme-settings";
 import appIcons from "../appIcons.json";
-import {getThemedUrl} from "../AppIconWithFallback";
+import {alignTheme} from "../theme-settings";
 import {$TSFixMe} from "../tsfixme";
-import {cardTypeColors} from "../designSystem";
+import type {EmojiDataProps} from "./data/get-data";
+import {EmojiMartWrapper, NimblePicker, NimblePickerProps} from "./emoji-mart";
 import {ColorPicker} from "../ColorPicker";
+import {cardTypeColors} from "../designSystem";
 
 const EMPTY_DATA = {
   aliases: {},
@@ -15,16 +16,20 @@ const EMPTY_DATA = {
   compressed: false,
 };
 
+type NimblePickerWithData = Omit<NimblePickerProps, keyof EmojiDataProps>;
+
 export type AppIconPickerProps = {
   borderless?: boolean;
   color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
-} & PickerProps;
+} & NimblePickerWithData;
 
-const i18n = {search: "Search icon..."};
+const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
 export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
-  {borderless = true, onColorSelect, color, ...pickerProps},
+  {borderless = true, color, getHoverColor, colors = cardTypeColors, onColorSelect, ...pickerProps},
   ref
 ) {
   const themeMode = useThemeMode();
@@ -43,20 +48,21 @@ export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(func
   );
 
   return (
-    <EmojiMartWrapper ref={ref} color={color} borderless={borderless} hideCategories>
-      <NimblePicker
-        data={EMPTY_DATA}
-        theme={alignedTheme}
-        showSkinTones={false}
-        showPreview={false}
-        emojiTooltip
-        title=""
-        custom={customIcons}
-        emojiSize={20}
-        i18n={i18n}
-        {...pickerProps}
-      />
-      {onColorSelect ? <ColorPicker colors={cardTypeColors} color={color} onChangeComplete={onColorSelect} /> : null}
+    <EmojiMartWrapper
+      ref={ref}
+      emojiHoverColor={color ? getHoverColor?.(color) : undefined}
+      borderless={borderless}
+      hideCategories
+    >
+      <NimblePicker custom={customIcons} i18n={i18n} {...pickerProps} data={EMPTY_DATA} showSkinTones={false} />
+      {onColorSelect ? (
+        <ColorPicker
+          colors={colors}
+          getSwatchHoverColor={getHoverColor}
+          color={color}
+          onChangeComplete={onColorSelect}
+        />
+      ) : null}
     </EmojiMartWrapper>
   );
 });

package/src/emoji-mart/data/get-data.tsx

@@ -0,0 +1,51 @@
+import type {Data} from "emoji-mart";
+import {detectEmojiSupportLevel} from "../emoji-support";
+
+export type EmojiDataProps = {
+  native: boolean;
+  data: Data;
+  backgroundImageFn: (set: string) => string;
+  set: "apple" | "twitter";
+  sheetColumns: number;
+  sheetRows: number;
+};
+
+let promise: Promise<EmojiDataProps>;
+
+const backgroundImageFn = (set: string) =>
+  `https://fibery-ui-public-assets.s3.eu-central-1.amazonaws.com/images/emoji-datasource-${set}-15_0_1-64.png`;
+
+const getAppleDataProps = async (): Promise<EmojiDataProps> => {
+  const [level, data] = await Promise.all([detectEmojiSupportLevel(), import("./all.json")]);
+
+  return {
+    native: level >= 14, // until twemoji supports v15 our all.json represents data for v14
+    data: data.default,
+    backgroundImageFn,
+    set: "apple",
+    sheetColumns: 61,
+    sheetRows: 61,
+  };
+};
+const getTwitterDataProps = async (): Promise<EmojiDataProps> => {
+  const data = await import("./all.json");
+
+  return {
+    native: false,
+    data: data.default,
+    backgroundImageFn,
+    set: "twitter",
+    sheetColumns: 61,
+    sheetRows: 61,
+  };
+};
+
+const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+export const getEmojiDataProps = async () => {
+  if (!promise) {
+    promise = isApple() ? getAppleDataProps() : getTwitterDataProps();
+  }
+
+  return promise;
+};

package/src/emoji-mart/data.tsx

@@ -0,0 +1,4 @@
+export const loadEmojiData = async () => {
+  const data = await import("emoji-mart/data/all.json");
+  return data;
+};

package/src/emoji-mart/emoji/emoji.tsx

@@ -0,0 +1,26 @@
+import {css} from "@linaria/core";
+import {NimbleEmoji, NimbleEmojiProps} from "emoji-mart";
+import {themeVars} from "../../designSystem";
+
+const emojiWrapperCss = css`
+  display: inline-flex;
+  align-items: center;
+
+  & span.emoji-mart-emoji {
+    color: ${themeVars.textColor};
+    line-height: 1;
+    vertical-align: middle;
+    & span {
+      vertical-align: middle;
+    }
+  }
+`;
+
+export type EmojiMartEmojiProps = NimbleEmojiProps;
+export const EmojiMartEmoji: React.FC<NimbleEmojiProps> = (props) => {
+  return (
+    <span className={emojiWrapperCss}>
+      <NimbleEmoji {...props} />
+    </span>
+  );
+};

package/src/emoji-mart/emoji/index.tsx

@@ -0,0 +1,24 @@
+import {lazy, Suspense} from "react";
+import {EmojiDataProps, getEmojiDataProps} from "../data/get-data";
+import {EmojiMartEmoji, type EmojiMartEmojiProps} from "./emoji";
+
+type EmojiProps = Omit<EmojiMartEmojiProps, keyof EmojiDataProps>;
+
+const LazyEmojiComponent = lazy(async () => {
+  const emojiDataProps = await getEmojiDataProps();
+
+  function Emoji(props: EmojiProps) {
+    return <EmojiMartEmoji {...props} {...emojiDataProps} />;
+  }
+  return {
+    default: Emoji,
+  };
+});
+
+export const Emoji: React.FC<EmojiProps> = function EmojiOrLoader(props) {
+  return (
+    <Suspense fallback={<div style={{width: props.size, height: props.size}} />}>
+      <LazyEmojiComponent {...props} />
+    </Suspense>
+  );
+};

package/src/emoji-mart/emoji-index.ts

@@ -0,0 +1,5 @@
+import {NimbleEmojiIndex} from "emoji-mart";
+
+import data from "./data/all.json";
+
+export const emojiIndex = new NimbleEmojiIndex(data);

package/src/emoji-mart/emoji-mart.tsx

@@ -1,15 +1,32 @@
 import {CSSProperties, css, cx} from "@linaria/core";
-import {Emoji, EmojiProps} from "emoji-mart";
 import "emoji-mart/css/emoji-mart.css";
 import {forwardRef} from "react";
-import {useTheme} from "../ThemeProvider";
-import {a11yColor} from "../a11y-color";
-import {border, fontFamily, getOpacities, space, textStyles, themeVars} from "../designSystem";
+import {useTheme, useThemeMode} from "../ThemeProvider";
+import {border, fontFamily, space, textStyles, themeVars} from "../designSystem";
 
-export {NimblePicker, Picker, emojiIndex} from "emoji-mart";
-export type {BaseEmoji, EmojiSkin, PickerProps} from "emoji-mart";
+import {NimblePickerProps, NimblePicker as Picker} from "emoji-mart";
+import {alignTheme} from "../theme-settings";
 
-export const backgroundImageFn = () => "https://assets-temp.fibery.io/images/emoji-datasource-apple-5_0_1-64.png";
+export type {BaseEmoji, EmojiSkin, NimblePickerProps} from "emoji-mart";
+
+export const NimblePicker = (props: NimblePickerProps) => {
+  const themeMode = useThemeMode();
+  const theme = useTheme();
+
+  return (
+    <Picker
+      theme={alignTheme(themeMode)}
+      title={""}
+      showPreview={false}
+      skinEmoji="hand"
+      color={theme.primary}
+      emoji=""
+      emojiSize={20}
+      emojiTooltip
+      {...props}
+    />
+  );
+};
 
 const emojiMartCss = css`
   padding: 0 ${space.l}px;
@@ -58,6 +75,7 @@ const emojiMartCss = css`
   .emoji-mart-scroll {
     padding-left: 0;
     padding-right: 0;
+    height: 238px;
   }
 
   .emoji-anchor-bar {
@@ -80,7 +98,7 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-category .emoji-mart-emoji:hover::before {
-    background-color: var(--emoji-bg-color) !important;
+    background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor}) !important;
     border-radius: ${border.radius8}px !important;
   }
   .emoji-mart-dark .emoji-mart-category-label span {
@@ -97,6 +115,7 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-emoji {
+    color: ${themeVars.textColor};
     /* pathetic attemts to make it a bit faster without forking */
     content-visibility: auto;
     contain-intrinsic-size: 20px;
@@ -130,13 +149,6 @@ const emojiMartCss = css`
           padding: 0;
         }
 
-        & .emoji-mart-emoji-native span {
-          width: 20px;
-          font-size: 20px !important;
-          height: 20px;
-          display: inline-block;
-        }
-
         &:hover {
           background-color: ${themeVars.badgeBgColor} !important;
           border-radius: ${border.radius8}px !important;
@@ -180,20 +192,16 @@ type EmojiMartWrapperProps = React.PropsWithChildren<{
   borderless?: boolean;
   hideCategories?: boolean;
   shortSearch?: boolean;
-  color?: string;
+  emojiHoverColor?: string;
 }>;
 
 export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {borderless, hideCategories, color, shortSearch, children},
+  {borderless, hideCategories, emojiHoverColor, shortSearch, children},
   ref
 ) {
-  const theme = useTheme();
-
-  const bgColor = color ? a11yColor(getOpacities(color).opacity20, theme.menuBg, 1.3) : theme.badgeBgColor;
-
   return (
     <div
-      style={{"--emoji-bg-color": bgColor} as CSSProperties}
+      style={{"--fibery-emoji-hover-color": emojiHoverColor} as CSSProperties}
       ref={ref}
       className={cx(
         emojiMartCss,
@@ -206,21 +214,3 @@ export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps
     </div>
   );
 });
-
-const emojiWrapperCss = css`
-  & span.emoji-mart-emoji-native {
-    line-height: 1;
-    vertical-align: middle;
-    & span {
-      vertical-align: middle;
-    }
-  }
-`;
-
-export const EmojiMartEmoji: React.FC<EmojiProps> = (props) => {
-  return (
-    <span className={emojiWrapperCss}>
-      <Emoji backgroundImageFn={backgroundImageFn} {...props} />
-    </span>
-  );
-};

package/src/emoji-mart/emoji-picker.tsx

@@ -1,45 +1,78 @@
-import {forwardRef} from "react";
-import {useTheme, useThemeMode} from "../ThemeProvider";
-import {EmojiMartWrapper, Picker, PickerProps, backgroundImageFn} from "./emoji-mart";
-import {alignTheme} from "../theme-settings";
-import {$TSFixMe} from "../tsfixme";
+import {Suspense, forwardRef, lazy} from "react";
 import {ColorPicker} from "../ColorPicker";
 import {cardTypeColors} from "../designSystem";
+import {$TSFixMe} from "../tsfixme";
+import {EmojiMartWrapper, NimblePicker, NimblePickerProps} from "./emoji-mart";
+import {EmojiDataProps, getEmojiDataProps} from "./data/get-data";
+
+type NimblePickerWithData = Omit<NimblePickerProps, keyof EmojiDataProps>;
+
+const NimblePickerWithData = lazy(async () => {
+  const emojiDataProps = await getEmojiDataProps();
+
+  return {
+    default: function EmojiPicker(props: NimblePickerWithData) {
+      return <NimblePicker {...props} {...emojiDataProps} />;
+    },
+  };
+});
+
+const EmojiPickerComponent: React.FC<NimblePickerWithData> = (props) => {
+  return (
+    <Suspense
+      fallback={
+        <div
+          className="emoji-mart"
+          style={{
+            height: "280px",
+          }}
+        />
+      }
+    >
+      <NimblePickerWithData {...props} />
+    </Suspense>
+  );
+};
 
 export type EmojiPickerProps = {
   borderless?: boolean;
   color?: string;
+  getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
-} & PickerProps;
+} & NimblePickerWithData;
 
 const i18n = {search: "Search emoji..."};
 
-export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPickerComponent(
-  {borderless = true, color, colors = cardTypeColors, onColorSelect, showSkinTones = true, ...pickerProps},
+export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPicker(
+  {
+    borderless = true,
+    color,
+    getHoverColor,
+    colors = cardTypeColors,
+    onColorSelect,
+    showSkinTones = true,
+    ...pickerProps
+  },
   ref
 ) {
-  const themeMode = useThemeMode();
-  const theme = useTheme();
-
   return (
-    <EmojiMartWrapper ref={ref} color={color} borderless={borderless} hideCategories shortSearch={showSkinTones}>
-      <Picker
-        theme={alignTheme(themeMode)}
-        backgroundImageFn={backgroundImageFn}
-        native
-        title={""}
-        showPreview={false}
-        showSkinTones={showSkinTones}
-        skinEmoji="hand"
-        color={theme.primary}
-        emoji=""
-        emojiSize={20}
-        emojiTooltip
-        i18n={i18n}
-        {...pickerProps}
-      />
-      {onColorSelect ? <ColorPicker colors={colors} color={color} onChangeComplete={onColorSelect} /> : null}
+    <EmojiMartWrapper
+      ref={ref}
+      emojiHoverColor={color ? getHoverColor?.(color) : undefined}
+      borderless={borderless}
+      hideCategories
+      shortSearch={showSkinTones}
+    >
+      <EmojiPickerComponent showSkinTones={showSkinTones} i18n={i18n} {...pickerProps} />
+      {onColorSelect ? (
+        <ColorPicker
+          colors={colors}
+          getSwatchHoverColor={getHoverColor}
+          color={color}
+          onChangeComplete={onColorSelect}
+        />
+      ) : null}
     </EmojiMartWrapper>
   );
 });