@fibery/ui-kit 1.9.2 → 1.10.1

package/package.json

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

package/src/designSystem.ts

@@ -202,6 +202,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 +255,7 @@ const lightColors = {
   progressFillBg: slate.slate11,
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slate.slate1,
+  colorPickerSwatchBorder: blackA.blackA7,
 } as const;
 
 const darkMenu = {
@@ -364,6 +366,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,6 +417,7 @@ const darkColors = {
   progressFillBg: slate.slate11,
   progressFillText: whiteA.whiteA0,
   searchFiltersBg: slateDark.slate2,
+  colorPickerSwatchBorder: blackA.blackA7,
   ...darkMenu,
 } as const;
 
@@ -554,6 +558,9 @@ export const getEnumBackgroundColor = _.memoize(
 );
 
 export const cardTypeColors = [
+  "#4A4A4A",
+  "#6A849B",
+  "#BEC5CC",
   "#D40915",
   "#E72065",
   "#9C2BAF",
@@ -568,8 +575,6 @@ export const cardTypeColors = [
   "#FBA32F",
   "#FC551F",
   "#B04E31",
-  "#6A849B",
-  "#4A4A4A",
 ] as const;
 
 export const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
@@ -579,13 +584,11 @@ export const colors = {
   ...getTypeColors(brandColors.green, "light"),
   brandColors,
   stateColors,
-  textColor: "#2A3844",
-  inversedTextColor: "#FFFFFF",
-  disabledInversedTextColor: lights.opacity25,
-  unitBg: "rgba(220, 224, 228, 0.33)",
   transparent,
   shades,
   lights,
+  inversedTextColor: "#FFFFFF",
+  disabledInversedTextColor: lights.opacity25,
 } as const;
 
 export const space = {

package/src/{app-icon-picker.tsx → emoji-mart/app-icon-picker.tsx}

@@ -1,9 +1,12 @@
 import {forwardRef, useMemo} from "react";
 import {EmojiMartWrapper, NimblePicker, PickerProps} from "./emoji-mart";
-import {useThemeMode} from "./ThemeProvider";
-import {alignTheme} from "./theme-settings";
-import appIcons from "./appIcons.json";
-import {getThemedUrl} from "./AppIconWithFallback";
+import {useThemeMode} from "../ThemeProvider";
+import {alignTheme} from "../theme-settings";
+import appIcons from "../appIcons.json";
+import {getThemedUrl} from "../AppIconWithFallback";
+import {$TSFixMe} from "../tsfixme";
+import {cardTypeColors} from "../designSystem";
+import {ColorPicker} from "../ColorPicker";
 
 const EMPTY_DATA = {
   aliases: {},
@@ -12,10 +15,16 @@ const EMPTY_DATA = {
   compressed: false,
 };
 
-export type AppIconPickerProps = {borderless?: boolean} & PickerProps;
+export type AppIconPickerProps = {
+  borderless?: boolean;
+  color?: string;
+  onColorSelect?: (c: $TSFixMe) => void;
+} & PickerProps;
+
+const i18n = {search: "Search icon..."};
 
 export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
-  {borderless = true, ...pickerProps},
+  {borderless = true, onColorSelect, color, ...pickerProps},
   ref
 ) {
   const themeMode = useThemeMode();
@@ -34,17 +43,20 @@ export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(func
   );
 
   return (
-    <EmojiMartWrapper ref={ref} borderless={borderless} hideCategories>
+    <EmojiMartWrapper ref={ref} color={color} borderless={borderless} hideCategories>
       <NimblePicker
         data={EMPTY_DATA}
         theme={alignedTheme}
         showSkinTones={false}
         showPreview={false}
+        emojiTooltip
         title=""
         custom={customIcons}
-        emojiSize={22}
+        emojiSize={20}
+        i18n={i18n}
         {...pickerProps}
       />
+      {onColorSelect ? <ColorPicker colors={cardTypeColors} color={color} onChangeComplete={onColorSelect} /> : null}
     </EmojiMartWrapper>
   );
 });

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

@@ -0,0 +1,226 @@
+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";
+
+export {NimblePicker, Picker, emojiIndex} from "emoji-mart";
+export type {BaseEmoji, EmojiSkin, PickerProps} from "emoji-mart";
+
+export const backgroundImageFn = () => "https://assets-temp.fibery.io/images/emoji-datasource-apple-5_0_1-64.png";
+
+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: 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: 32px;
+      border: 0;
+    }
+
+    & .emoji-mart-search-icon {
+      top: 5px;
+      right: 4px;
+    }
+  }
+
+  .emoji-mart-scroll {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .emoji-anchor-bar {
+    height: ${space.xxs}px;
+  }
+
+  .emoji-mart-category-label {
+    & span {
+      ${textStyles.heading6}
+      background-color: ${themeVars.actionMenuBg};
+      color: ${themeVars.textColor};
+      color: ${themeVars.accentTextColor};
+      padding-top: ${space.l}px;
+    }
+  }
+
+  .emoji-mart-category .emoji-mart-emoji span,
+  .emoji-mart-anchor {
+    cursor: pointer !important;
+  }
+
+  .emoji-mart-category .emoji-mart-emoji:hover::before {
+    background-color: var(--emoji-bg-color) !important;
+    border-radius: ${border.radius8}px !important;
+  }
+  .emoji-mart-dark .emoji-mart-category-label span {
+    background-color: ${themeVars.actionMenuBg};
+  }
+
+  .emoji-mart-skin-swatch {
+    cursor: pointer;
+  }
+
+  .emoji-mart-preview {
+    height: 0px;
+    position: unset;
+  }
+
+  .emoji-mart-emoji {
+    /* pathetic attemts to make it a bit faster without forking */
+    content-visibility: auto;
+    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;
+        }
+
+        & .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;
+        }
+      }
+      & .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`
+  .emoji-mart {
+    border-radius: 0;
+    border: none;
+  }
+`;
+const hideCategoriesEmojiMartCss = css`
+  .emoji-mart-bar:first-child {
+    display: none;
+  }
+`;
+
+const emojiMartWithShortSearchCss = css`
+  .emoji-mart-search {
+    width: 250px;
+  }
+`;
+
+type EmojiMartWrapperProps = React.PropsWithChildren<{
+  borderless?: boolean;
+  hideCategories?: boolean;
+  shortSearch?: boolean;
+  color?: string;
+}>;
+
+export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
+  {borderless, hideCategories, color, 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}
+      ref={ref}
+      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>
+  );
+};

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

@@ -0,0 +1,45 @@
+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 {ColorPicker} from "../ColorPicker";
+import {cardTypeColors} from "../designSystem";
+
+export type EmojiPickerProps = {
+  borderless?: boolean;
+  color?: string;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+} & PickerProps;
+
+const i18n = {search: "Search emoji..."};
+
+export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPickerComponent(
+  {borderless = true, color, 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>
+  );
+});

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

@@ -0,0 +1,101 @@
+// copied from https://github.com/nolanlawson/emoji-picker-element/
+const versionsAndTestEmoji = {
+  "🫠": 14,
+  "🥲": 13.1, // smiling face with tear, technically from v13 but see note above
+  "🥻": 12.1, // sari, technically from v12 but see note above
+  "🥰": 11,
+  "🤩": 5,
+  "👱‍♀️": 4,
+  "🤣": 3,
+  "👁️‍🗨️": 2,
+  "😀": 1,
+  "😐️": 0.7,
+  "😃": 0.6,
+};
+const FONT_FAMILY =
+  '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",' +
+  '"Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif';
+const rIC = typeof requestIdleCallback === "function" ? requestIdleCallback : setTimeout;
+
+// only used in jest tests
+const simulateCanvasError = false;
+const simulateOldBrowser = false;
+
+const getTextFeature = (text: string, color: string) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+
+  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+  ctx.textBaseline = "top";
+  ctx.font = `100px ${FONT_FAMILY}`;
+  ctx.fillStyle = color;
+  ctx.scale(0.01, 0.01);
+  ctx.fillText(text, 0, 0);
+
+  return ctx.getImageData(0, 0, 1, 1).data;
+};
+
+const compareFeatures = (feature1: Uint8ClampedArray, feature2: Uint8ClampedArray) => {
+  const feature1Str = [...feature1].join(",");
+  const feature2Str = [...feature2].join(",");
+  // This is RGBA, so for 0,0,0, we are checking that the first RGB is not all zeroes.
+  // Most of the time when unsupported this is 0,0,0,0, but on Chrome on Mac it is
+  // 0,0,0,61 - there is a transparency here.
+  return feature1Str === feature2Str && !feature1Str.startsWith("0,0,0,");
+};
+
+function testColorEmojiSupported(text: string) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore TODO: fix type error
+  if (process.env.NODE_ENV === "test") {
+    if (simulateCanvasError) {
+      throw new Error("canvas error");
+    } else if (simulateOldBrowser) {
+      return Object.entries(versionsAndTestEmoji)
+        .filter(([, version]) => version < 12)
+        .map(([emoji]) => emoji)
+        .includes(text);
+    }
+    return true; // avoid using canvas in jest
+  }
+  // Render white and black and then compare them to each other and ensure they're the same
+  // color, and neither one is black. This shows that the emoji was rendered in color.
+  const feature1 = getTextFeature(text, "#000");
+  const feature2 = getTextFeature(text, "#fff");
+  return feature1 && feature2 && compareFeatures(feature1, feature2);
+}
+
+function determineEmojiSupportLevel() {
+  performance.mark("determineEmojiSupportLevel");
+  const entries = Object.entries(versionsAndTestEmoji);
+  try {
+    // start with latest emoji and work backwards
+    for (const [emoji, version] of entries) {
+      if (testColorEmojiSupported(emoji)) {
+        return version;
+      }
+    }
+  } catch (e) {
+    // canvas error
+    // eslint-disable-next-line no-console
+    console.log("Ignoring canvas error", e);
+  } finally {
+    performance.measure("determineEmojiSupportLevel", "determineEmojiSupportLevel");
+  }
+  // In case of an error, be generous and just assume all emoji are supported (e.g. for canvas errors
+  // due to anti-fingerprinting add-ons). Better to show some gray boxes than nothing at all.
+  return entries[0][1]; // first one in the list is the most recent version
+}
+
+// Check which emojis we know for sure aren't supported, based on Unicode version level
+let promise: Promise<number>;
+export const detectEmojiSupportLevel = () => {
+  if (!promise) {
+    promise = new Promise((resolve) => {
+      rIC(
+        () => resolve(determineEmojiSupportLevel()) // delay so ideally this can run while IDB is first populating
+      );
+    });
+  }
+  return promise;
+};

package/src/emoji-mart/emoji.tsx

@@ -0,0 +1,24 @@
+import {lazy, Suspense} from "react";
+import {detectEmojiSupportLevel} from "./emoji-support";
+
+const LazyEmojiComponent = lazy(async () => {
+  const {EmojiMartEmoji} = await import("./emoji-mart");
+  const level = await detectEmojiSupportLevel();
+
+  function Emoji(props: React.ComponentPropsWithoutRef<typeof EmojiMartEmoji>) {
+    return <EmojiMartEmoji {...props} native={level >= 5} />;
+  }
+  return {
+    default: Emoji,
+  };
+});
+
+export const Emoji: React.FC<React.ComponentPropsWithoutRef<typeof LazyEmojiComponent>> = function EmojiOrLoader(
+  props
+) {
+  return (
+    <Suspense fallback={<div style={{width: props.size, height: props.size}} />}>
+      <LazyEmojiComponent {...props} />
+    </Suspense>
+  );
+};

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

@@ -0,0 +1,69 @@
+import {css} from "@linaria/core";
+import {Button} from "../Button";
+import {AntTabs} from "../antd";
+import {space, textStyles} from "../designSystem";
+import {$TSFixMe} from "../tsfixme";
+import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
+import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+
+const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
+  <div
+    className={css`
+      ${textStyles.heading5}
+    `}
+  >
+    {children}
+  </div>
+);
+
+type IconEmojiPickerProps = React.PropsWithChildren<{
+  onIconSelect: NonNullable<AppIconPickerProps["onSelect"]>;
+  onEmojiSelect: NonNullable<EmojiPickerProps["onSelect"]>;
+  onColorSelect?: (c: $TSFixMe) => void;
+  onReset?: () => void;
+  resetLabel?: string;
+  defaultTab?: "icons" | "emojis";
+  color?: string;
+}>;
+export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
+  onIconSelect,
+  onEmojiSelect,
+  onColorSelect,
+  defaultTab,
+  onReset,
+  resetLabel = "Reset",
+  color,
+}) => {
+  return (
+    <AntTabs
+      animated={false}
+      destroyInactiveTabPane
+      defaultActiveKey={defaultTab}
+      items={[
+        {
+          key: "icons",
+          label: <TabHeader>Icons</TabHeader>,
+          children: <AppIconPicker color={color} onColorSelect={onColorSelect} onSelect={onIconSelect} />,
+        },
+        {
+          key: "emojis",
+          label: <TabHeader>Emojis</TabHeader>,
+          children: <EmojiPicker color={color} onColorSelect={onColorSelect} onSelect={onEmojiSelect} />,
+        },
+      ]}
+      tabBarExtraContent={
+        onReset ? (
+          <div
+            className={css`
+              padding-right: ${space.l}px;
+            `}
+          >
+            <Button size={":button-size/small"} onClick={onReset}>
+              {resetLabel}
+            </Button>
+          </div>
+        ) : null
+      }
+    />
+  );
+};

package/src/emoji-mart.tsx

@@ -1,122 +0,0 @@
-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 as EmojiMartEmoji, EmojiProps} from "emoji-mart";
-
-export {detectEmojiSupportLevel} from "./emojiSupport";
-export {emojiIndex, Picker, NimblePicker} from "emoji-mart";
-export type {BaseEmoji, PickerProps, EmojiSkin} from "emoji-mart";
-
-export const backgroundImageFn = () => "https://assets-temp.fibery.io/images/emoji-datasource-apple-5_0_1-64.png";
-
-const emojiMartCss = css`
-  .emoji-mart {
-    background-color: ${themeVars.actionMenuBg};
-    margin-top: ${space.xxs}px;
-    display: block;
-  }
-
-  .emoji-mart-bar {
-    border-bottom: 1px solid ${themeVars.separatorColor};
-
-    &:last-child {
-      border-top: 1px solid ${themeVars.separatorColor};
-    }
-  }
-
-  .emoji-mart-search {
-    padding-bottom: ${space.s}px;
-
-    & input {
-      ${textStyles.regular}
-      background-color: ${themeVars.inputBgColor};
-      color: ${themeVars.textColor};
-      box-shadow: ${themeVars.inputBorderColor};
-      height: 34px;
-      border: 0;
-    }
-  }
-
-  .emoji-anchor-bar {
-    height: ${space.xxs}px;
-  }
-
-  .emoji-mart-category-label {
-    & span {
-      ${textStyles.heading6}
-      background-color: ${themeVars.actionMenuBg};
-      color: ${themeVars.textColor};
-      color: ${themeVars.accentTextColor};
-      padding-top: ${space.l}px;
-    }
-  }
-
-  .emoji-mart-category .emoji-mart-emoji span,
-  .emoji-mart-anchor {
-    cursor: pointer !important;
-  }
-
-  .emoji-mart-category .emoji-mart-emoji:hover::before {
-    background-color: ${themeVars.badgeBgColor} !important;
-    border-radius: ${border.radius8}px !important;
-  }
-  .emoji-mart-dark .emoji-mart-category-label span {
-    background-color: ${themeVars.actionMenuBg};
-  }
-
-  .emoji-mart-skin-swatch {
-    cursor: pointer;
-  }
-
-  .emoji-mart-preview {
-    height: 50px;
-  }
-
-  .emoji-mart-preview-skins {
-    right: 15px;
-  }
-
-  .emoji-mart-emoji {
-    /* pathetic attemts to make it a bit faster without forking */
-    content-visibility: auto;
-    contain-intrinsic-size: 22px;
-  }
-  .emoji-mart-category-list,
-  .emoji-mart-category-list li {
-    /* hack to maintain correct size of hidden emojis becuase of content-visibility */
-    line-height: 0;
-  }
-`;
-
-const borderlessEmojiMartCss = css`
-  .emoji-mart {
-    border-radius: 0;
-    border: none;
-  }
-`;
-const hideCategoriesEmojiMartCss = css`
-  .emoji-mart-bar:first-child {
-    display: none;
-  }
-`;
-
-type EmojiMartWrapperProps = React.PropsWithChildren<{borderless?: boolean; hideCategories?: boolean}>;
-
-export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {borderless, hideCategories, children},
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={cx(emojiMartCss, borderless && borderlessEmojiMartCss, hideCategories && hideCategoriesEmojiMartCss)}
-    >
-      {children}
-    </div>
-  );
-});
-
-export const Emoji: React.FC<EmojiProps> = (props) => {
-  return <EmojiMartEmoji backgroundImageFn={backgroundImageFn} {...props} />;
-};

package/src/emoji-picker.tsx

@@ -1,32 +0,0 @@
-import {forwardRef} from "react";
-import {useTheme, useThemeMode} from "./ThemeProvider";
-import {EmojiMartWrapper, Picker, PickerProps, backgroundImageFn} from "./emoji-mart";
-import {alignTheme} from "./theme-settings";
-
-type EmojiPickerProps = {
-  borderless?: boolean;
-} & PickerProps;
-
-export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPickerComponent(
-  {borderless = true, ...pickerProps},
-  ref
-) {
-  const themeMode = useThemeMode();
-  const theme = useTheme();
-
-  return (
-    <EmojiMartWrapper ref={ref} borderless={borderless}>
-      <Picker
-        theme={alignTheme(themeMode)}
-        backgroundImageFn={backgroundImageFn}
-        native
-        title={""}
-        showPreview={false}
-        color={theme.primary}
-        emoji=""
-        emojiSize={22}
-        {...pickerProps}
-      />
-    </EmojiMartWrapper>
-  );
-});