@fibery/ui-kit 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.10.0",
+  "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": {
@@ -51,7 +51,7 @@
     "rc-input-number": "7.3.11",
     "rc-menu": "9.8.1",
     "rc-progress": "3.4.1",
-    "react-color": "2.13.8",
+    "react-color": "2.19.3",
     "react-day-picker": "8.1.4",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
@@ -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,
@@ -202,6 +205,7 @@ const lightColors = {
   cellBackgroundColor: slate.slate2,
   cellBackgroundHoverColor: getOpacities(slate.slate6).opacity30,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
+  cellPinnedBorderColor: getOpacities(slate.slate8).opacity70,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
   errorBgColor: getOpacities(red.red9).opacity20,
   errorTextColor: red.red11,
@@ -254,6 +258,23 @@ const lightColors = {
   progressFillBg: slate.slate11,
   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 = {
@@ -279,6 +300,7 @@ const darkColors = {
   mode: "dark",
   brandColors,
   stateColors,
+  primaryBlue: indigoDark.indigo10,
   whiteColor: whiteA.whiteA0,
   blackColor: blackA.blackA0,
   mainBg: slateDark.slate1,
@@ -316,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,
@@ -364,6 +387,7 @@ const darkColors = {
   cellBackgroundColor: slateDark.slate2,
   cellBackgroundHoverColor: getOpacities(slateDark.slate6).opacity30,
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
+  cellPinnedBorderColor: getOpacities(slateDark.slate9).opacity70,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
   errorBgColor: getOpacities(redDark.red9).opacity60,
   errorTextColor: red.red7,
@@ -414,10 +438,29 @@ const darkColors = {
   progressFillBg: slate.slate11,
   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");
   }
@@ -425,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");
   }
@@ -432,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");
   }
@@ -541,19 +588,50 @@ 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",
+  "#BEC5CC",
   "#D40915",
   "#E72065",
   "#9C2BAF",
@@ -568,11 +646,9 @@ export const cardTypeColors = [
   "#FBA32F",
   "#FC551F",
   "#B04E31",
-  "#6A849B",
-  "#4A4A4A",
 ] 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,9 +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 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: {},
@@ -12,10 +16,20 @@ const EMPTY_DATA = {
   compressed: false,
 };
 
-export type AppIconPickerProps = {borderless?: boolean} & PickerProps;
+type NimblePickerWithData = Omit<NimblePickerProps, keyof EmojiDataProps>;
+
+export type AppIconPickerProps = {
+  borderless?: boolean;
+  color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+} & NimblePickerWithData;
+
+const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
 export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
-  {borderless = true, ...pickerProps},
+  {borderless = true, color, getHoverColor, colors = cardTypeColors, onColorSelect, ...pickerProps},
   ref
 ) {
   const themeMode = useThemeMode();
@@ -34,17 +48,21 @@ export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(func
   );
 
   return (
-    <EmojiMartWrapper ref={ref} borderless={borderless} hideCategories>
-      <NimblePicker
-        data={EMPTY_DATA}
-        theme={alignedTheme}
-        showSkinTones={false}
-        showPreview={false}
-        title=""
-        custom={customIcons}
-        emojiSize={22}
-        {...pickerProps}
-      />
+    <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,40 +1,81 @@
+import {CSSProperties, css, cx} from "@linaria/core";
 import "emoji-mart/css/emoji-mart.css";
 import {forwardRef} from "react";
-import {border, space, textStyles, themeVars} from "../designSystem";
-import {cx, css} from "@linaria/core";
-import {Emoji, EmojiProps} from "emoji-mart";
+import {useTheme, useThemeMode} from "../ThemeProvider";
+import {border, fontFamily, space, textStyles, themeVars} from "../designSystem";
 
-export {emojiIndex, Picker, NimblePicker} from "emoji-mart";
-export type {BaseEmoji, PickerProps, EmojiSkin} 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;
+  position: relative;
+
   .emoji-mart {
+    font-family: ${fontFamily};
     background-color: ${themeVars.actionMenuBg};
     margin-top: ${space.xxs}px;
     display: block;
+    width: 288px !important;
+
+    + * {
+      border-top: 1px solid ${themeVars.separatorColor};
+    }
   }
 
   .emoji-mart-bar {
     border-bottom: 1px solid ${themeVars.separatorColor};
 
     &:last-child {
-      border-top: 1px solid ${themeVars.separatorColor};
+      border: 0;
     }
   }
 
   .emoji-mart-search {
     padding-bottom: ${space.s}px;
+    padding-left: 0;
+    padding-right: 0;
 
     & input {
       ${textStyles.regular}
       background-color: ${themeVars.inputBgColor};
       color: ${themeVars.textColor};
       box-shadow: ${themeVars.inputBorderColor};
-      height: 34px;
+      height: 32px;
       border: 0;
     }
+
+    & .emoji-mart-search-icon {
+      top: 5px;
+      right: 4px;
+    }
+  }
+
+  .emoji-mart-scroll {
+    padding-left: 0;
+    padding-right: 0;
+    height: 238px;
   }
 
   .emoji-anchor-bar {
@@ -57,7 +98,7 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-category .emoji-mart-emoji:hover::before {
-    background-color: ${themeVars.badgeBgColor} !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 {
@@ -69,23 +110,64 @@ const emojiMartCss = css`
   }
 
   .emoji-mart-preview {
-    height: 50px;
-  }
-
-  .emoji-mart-preview-skins {
-    right: 15px;
+    height: 0px;
+    position: unset;
   }
 
   .emoji-mart-emoji {
+    color: ${themeVars.textColor};
     /* pathetic attemts to make it a bit faster without forking */
     content-visibility: auto;
-    contain-intrinsic-size: 22px;
+    contain-intrinsic-size: 20px;
+    cursor: pointer;
   }
   .emoji-mart-category-list,
   .emoji-mart-category-list li {
     /* hack to maintain correct size of hidden emojis becuase of content-visibility */
     line-height: 0;
   }
+  .emoji-mart-preview-skins {
+    top: 16px;
+    right: 12px !important;
+    z-index: 2;
+    background-color: ${themeVars.actionMenuBg};
+
+    & .emoji-mart-skin-swatches {
+      background-color: ${themeVars.actionMenuBg};
+
+      &.opened {
+        & .emoji-mart-skin-swatch {
+          width: 32px !important;
+        }
+      }
+
+      & .emoji-mart-skin-swatch {
+        height: 32px !important;
+
+        &.selected {
+          width: 32px !important;
+          padding: 0;
+        }
+
+        &:hover {
+          background-color: ${themeVars.badgeBgColor} !important;
+          border-radius: ${border.radius8}px !important;
+        }
+      }
+      & .emoji-mart-skin-text {
+        height: auto;
+        padding: 0;
+        background-color: ${themeVars.actionMenuBg};
+        color: ${themeVars.accentTextColor};
+        border-radius: 0;
+
+        &.opened {
+          width: 98px;
+          padding-left: 8px;
+        }
+      }
+    }
+  }
 `;
 
 const borderlessEmojiMartCss = css`
@@ -100,36 +182,35 @@ const hideCategoriesEmojiMartCss = css`
   }
 `;
 
-type EmojiMartWrapperProps = React.PropsWithChildren<{borderless?: boolean; hideCategories?: boolean}>;
+const emojiMartWithShortSearchCss = css`
+  .emoji-mart-search {
+    width: 250px;
+  }
+`;
+
+type EmojiMartWrapperProps = React.PropsWithChildren<{
+  borderless?: boolean;
+  hideCategories?: boolean;
+  shortSearch?: boolean;
+  emojiHoverColor?: string;
+}>;
 
 export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {borderless, hideCategories, children},
+  {borderless, hideCategories, emojiHoverColor, shortSearch, children},
   ref
 ) {
   return (
     <div
+      style={{"--fibery-emoji-hover-color": emojiHoverColor} as CSSProperties}
       ref={ref}
-      className={cx(emojiMartCss, borderless && borderlessEmojiMartCss, hideCategories && hideCategoriesEmojiMartCss)}
+      className={cx(
+        emojiMartCss,
+        borderless && borderlessEmojiMartCss,
+        hideCategories && hideCategoriesEmojiMartCss,
+        shortSearch && emojiMartWithShortSearchCss
+      )}
     >
       {children}
     </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>
-  );
-};