@fibery/ui-kit 1.13.0 → 1.15.0

package/src/emoji-picker/stores/lazy-icon-data-store.tsx

@@ -0,0 +1,55 @@
+import {makeEmojiData} from "@fibery/emoji-data";
+import {Suspense, lazy, useEffect, useState} from "react";
+import {getThemedUrl} from "../../AppIconWithFallback";
+import {useThemeMode} from "../../ThemeProvider";
+import {alignTheme} from "../../theme-settings";
+import {EmojiDataStoreProvider, useEmojiDataStore} from "./emoji-data-store";
+
+const EMPTY_DATA = {
+  aliases: {},
+  emojis: {},
+  categories: [],
+  compressed: false,
+};
+
+const LazyAppIcons = lazy(async () => {
+  const {default: appIcons} = await import("../../appIcons.json");
+
+  return {
+    default: function EmojiDataStore({children}: React.PropsWithChildren) {
+      const emojiDataStore = useEmojiDataStore();
+      const themeMode = useThemeMode();
+      const alignedTheme = alignTheme(themeMode);
+
+      useEffect(() => {
+        // TODO: icons should be rendered as svg elements
+        const custom = appIcons.map((icon) => {
+          return {
+            ...icon,
+            imageUrl: getThemedUrl(icon.file, alignedTheme),
+          };
+        });
+
+        emojiDataStore.setCustom(custom);
+      }, [alignedTheme, emojiDataStore]);
+
+      return <>{children}</>;
+    },
+  };
+});
+
+export const LazyIconDataStore: React.FC<
+  React.PropsWithChildren<{
+    fallback: React.ReactNode;
+  }>
+> = ({fallback, children}) => {
+  const [emojiData] = useState(() => makeEmojiData(EMPTY_DATA));
+
+  return (
+    <EmojiDataStoreProvider data={emojiData}>
+      <Suspense fallback={fallback}>
+        <LazyAppIcons>{children}</LazyAppIcons>
+      </Suspense>
+    </EmojiDataStoreProvider>
+  );
+};

package/src/emoji-picker/stores/static-emoji-data-store.tsx

@@ -0,0 +1,16 @@
+import {FC, ReactNode, useMemo} from "react";
+import {makeEmojiData} from "@fibery/emoji-data";
+import {getEmojiSet} from "../utils/emoji-set";
+import {EmojiDataStoreProvider} from "./emoji-data-store";
+import rawData from "@fibery/emoji-data/data/all.json";
+
+// Static means "preloaded", "non-lazy" here
+
+interface EmojiDataProviderProps {
+  children?: ReactNode;
+}
+
+export const StaticEmojiDataStore: FC<EmojiDataProviderProps> = ({children}) => {
+  const emojiData = useMemo(() => makeEmojiData(rawData, {set: getEmojiSet()}), []);
+  return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -0,0 +1,5 @@
+import {SpritesheetSet} from "@fibery/emoji-data";
+
+export const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");

package/src/{emoji-mart → emoji-picker/utils}/emoji-support.ts

@@ -1,4 +1,4 @@
-// copied from https://github.com/nolanlawson/emoji-picker-element/
+// "hard-forked" from https://github.com/nolanlawson/emoji-picker-element/
 const versionsAndTestEmoji = {
   "🫸🏻": 15,
   "🫠": 14,
@@ -16,7 +16,6 @@ const versionsAndTestEmoji = {
 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;
@@ -89,14 +88,11 @@ function determineEmojiSupportLevel() {
 }
 
 // Check which emojis we know for sure aren't supported, based on Unicode version level
-let promise: Promise<number>;
+let version: number;
+
 export const detectEmojiSupportLevel = () => {
-  if (!promise) {
-    promise = new Promise((resolve) => {
-      rIC(
-        () => resolve(determineEmojiSupportLevel()) // delay so ideally this can run while IDB is first populating
-      );
-    });
+  if (!version) {
+    version = determineEmojiSupportLevel();
   }
-  return promise;
+  return version;
 };

package/src/emoji-picker/utils/frequently.ts

@@ -0,0 +1,82 @@
+import * as store from "./store";
+
+/** "hard-forked" as is from https://github.dev/missive/emoji-mart/blob/v3.0.1/src/utils/frequently.js */
+
+const DEFAULTS = [
+  "+1",
+  "grinning",
+  "kissing_heart",
+  "heart_eyes",
+  "laughing",
+  "stuck_out_tongue_winking_eye",
+  "sweat_smile",
+  "joy",
+  "scream",
+  "disappointed",
+  "unamused",
+  "weary",
+  "sob",
+  "sunglasses",
+  "heart",
+];
+
+let frequently: Record<string, number>;
+let defaults: Record<string, number> = {};
+let initialized = false;
+
+function init() {
+  initialized = true;
+  frequently = store.get("frequently");
+}
+
+export function add(emojiId: string) {
+  if (!initialized) {
+    init();
+  }
+
+  if (!frequently) {
+    frequently = defaults;
+  }
+
+  if (!frequently[emojiId]) {
+    frequently[emojiId] = 0;
+  }
+
+  frequently[emojiId] += 1;
+
+  store.set("last", emojiId);
+  store.set("frequently", frequently);
+}
+
+export function get(perLine: number) {
+  if (!initialized) {
+    init();
+  }
+  if (!frequently) {
+    defaults = {};
+
+    const result = [];
+
+    for (let i = 0; i < perLine; i++) {
+      defaults[DEFAULTS[i]] = perLine - i;
+      result.push(DEFAULTS[i]);
+    }
+
+    return result;
+  }
+
+  const quantity = perLine * 4;
+  const frequentlyKeys = Object.keys(frequently);
+
+  const sorted = frequentlyKeys.sort((a, b) => frequently[a] - frequently[b]).reverse();
+  const sliced = sorted.slice(0, quantity);
+
+  const last = store.get("last");
+
+  if (last && sliced.indexOf(last) === -1) {
+    sliced.pop();
+    sliced.push(last);
+  }
+
+  return sliced;
+}

package/src/emoji-picker/utils/load-emoji-data.ts

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

package/src/emoji-picker/utils/store.ts

@@ -0,0 +1,40 @@
+/** "hard-forked" as is from https://github.dev/missive/emoji-mart/blob/v3.0.1/src/utils/store.js */
+
+const NAMESPACE = "emoji-mart";
+
+const isLocalStorageSupported = typeof window !== "undefined" && "localStorage" in window;
+
+export function update(state: {[key: string]: unknown}) {
+  for (const key in state) {
+    const value = state[key];
+    set(key, value);
+  }
+}
+
+export function set(key: string, value: unknown) {
+  if (!isLocalStorageSupported) {
+    return;
+  }
+  try {
+    window.localStorage[`${NAMESPACE}.${key}`] = JSON.stringify(value);
+  } catch (e) {
+    /* empty */
+  }
+}
+
+export function get(key: string) {
+  if (!isLocalStorageSupported) {
+    return undefined;
+  }
+  try {
+    const value = window.localStorage[`${NAMESPACE}.${key}`];
+
+    if (value) {
+      return JSON.parse(value);
+    }
+  } catch (e) {
+    return undefined;
+  }
+
+  return undefined;
+}

package/src/icons/ast/AddAfter.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddAfter: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 3A2.25 2.25 0 0 0 2 5.25v9.5A2.25 2.25 0 0 0 4.25 17h3.5A2.25 2.25 0 0 0 10 14.75v-9.5A2.25 2.25 0 0 0 7.75 3h-3.5ZM3.5 5.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1-.75-.75v-9.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15 7a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 15 7Z"},"children":[]}],"metadata":""}]},"name":"add-after"};
+
+export default AddAfter;

package/src/icons/ast/AddBefore.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddBefore: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M12.25 3A2.25 2.25 0 0 0 10 5.25v9.5A2.25 2.25 0 0 0 12.25 17h3.5A2.25 2.25 0 0 0 18 14.75v-9.5A2.25 2.25 0 0 0 15.75 3h-3.5Zm-.75 2.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1-.75-.75v-9.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M5 7a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 5 7Z"},"children":[]}],"metadata":""}]},"name":"add-before"};
+
+export default AddBefore;

package/src/icons/ast/ArrowBarLeft.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowBarLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.75 3.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V3.75ZM6.78 8.03a.75.75 0 0 0-1.06-1.06l-2.5 2.5a.75.75 0 0 0 0 1.06l2.5 2.5a.75.75 0 0 0 1.06-1.06l-1.22-1.22h5.69a.75.75 0 0 0 0-1.5H5.56l1.22-1.22Z"},"children":[]}],"metadata":""}]},"name":"arrow-bar-left"};
+
+export default ArrowBarLeft;

package/src/icons/ast/ArrowBarRight.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowBarRight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M5.5 16.25a.75.75 0 0 1-1.5 0V3.75a.75.75 0 0 1 1.5 0v12.5ZM14.03 13.03a.75.75 0 1 1-1.06-1.06l1.22-1.22H8.5a.75.75 0 0 1 0-1.5h5.69l-1.22-1.22a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5Z"},"children":[]}],"metadata":""}]},"name":"arrow-bar-right"};
+
+export default ArrowBarRight;

package/src/icons/ast/Columns2.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Columns2: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h5v-11h-5Zm6.5 0v11h5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75h-5ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5Z"},"children":[]}],"metadata":""}]},"name":"columns-2"};
+
+export default Columns2;

package/src/icons/ast/Columns4.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Columns4: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75H5.5v-11H4.25ZM7 4.5v11h2.25v-11H7Zm3.75 0v11H13v-11h-2.25Zm3.75 0v11h1.25a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H14.5ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5Z"},"children":[]}],"metadata":""}]},"name":"columns-4"};
+
+export default Columns4;

package/src/icons/ast/LineDivider.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LineDivider: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z"},"children":[]}],"metadata":""}]},"name":"line-divider"};
+
+export default LineDivider;

package/src/icons/ast/index.tsx

@@ -1,6 +1,8 @@
 // This icon file is generated automatically.
 export { default as ActivityLog } from './ActivityLog';
 export { default as Activity } from './Activity';
+export { default as AddAfter } from './AddAfter';
+export { default as AddBefore } from './AddBefore';
 export { default as AddCompact } from './AddCompact';
 export { default as AddGroup } from './AddGroup';
 export { default as AddReactions } from './AddReactions';
@@ -19,6 +21,8 @@ export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
 export { default as App } from './App';
+export { default as ArrowBarLeft } from './ArrowBarLeft';
+export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
 export { default as ArrowCollapseVertical } from './ArrowCollapseVertical';
 export { default as ArrowCollapse } from './ArrowCollapse';
@@ -35,6 +39,8 @@ export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
 export { default as Close } from './Close';
 export { default as ColorCoding } from './ColorCoding';
+export { default as Columns2 } from './Columns2';
+export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
 export { default as CopyUrl } from './CopyUrl';
@@ -77,6 +83,7 @@ export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
+export { default as LineDivider } from './LineDivider';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';

package/src/icons/react/AddAfter.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AddAfterSvg from '../ast/AddAfter';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AddAfter = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AddAfterSvg} />;
+
+AddAfter.displayName = 'AddAfter';
+export default AddAfter;

package/src/icons/react/AddBefore.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AddBeforeSvg from '../ast/AddBefore';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AddBefore = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AddBeforeSvg} />;
+
+AddBefore.displayName = 'AddBefore';
+export default AddBefore;

package/src/icons/react/ArrowBarLeft.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ArrowBarLeftSvg from '../ast/ArrowBarLeft';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ArrowBarLeft = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ArrowBarLeftSvg} />;
+
+ArrowBarLeft.displayName = 'ArrowBarLeft';
+export default ArrowBarLeft;

package/src/icons/react/ArrowBarRight.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ArrowBarRightSvg from '../ast/ArrowBarRight';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ArrowBarRight = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ArrowBarRightSvg} />;
+
+ArrowBarRight.displayName = 'ArrowBarRight';
+export default ArrowBarRight;

package/src/icons/react/Columns2.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import Columns2Svg from '../ast/Columns2';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Columns2 = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={Columns2Svg} />;
+
+Columns2.displayName = 'Columns2';
+export default Columns2;

package/src/icons/react/Columns4.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import Columns4Svg from '../ast/Columns4';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Columns4 = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={Columns4Svg} />;
+
+Columns4.displayName = 'Columns4';
+export default Columns4;

package/src/icons/react/LineDivider.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LineDividerSvg from '../ast/LineDivider';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LineDivider = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LineDividerSvg} />;
+
+LineDivider.displayName = 'LineDivider';
+export default LineDivider;

package/src/icons/react/index.tsx

@@ -1,6 +1,8 @@
 // This icon file is generated automatically.
 export { default as ActivityLog } from './ActivityLog';
 export { default as Activity } from './Activity';
+export { default as AddAfter } from './AddAfter';
+export { default as AddBefore } from './AddBefore';
 export { default as AddCompact } from './AddCompact';
 export { default as AddGroup } from './AddGroup';
 export { default as AddReactions } from './AddReactions';
@@ -19,6 +21,8 @@ export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
 export { default as App } from './App';
+export { default as ArrowBarLeft } from './ArrowBarLeft';
+export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
 export { default as ArrowCollapseVertical } from './ArrowCollapseVertical';
 export { default as ArrowCollapse } from './ArrowCollapse';
@@ -35,6 +39,8 @@ export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
 export { default as Close } from './Close';
 export { default as ColorCoding } from './ColorCoding';
+export { default as Columns2 } from './Columns2';
+export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
 export { default as CopyUrl } from './CopyUrl';
@@ -77,6 +83,7 @@ export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
+export { default as LineDivider } from './LineDivider';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';

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

@@ -1,68 +0,0 @@
-import {forwardRef, useMemo} from "react";
-import {getThemedUrl} from "../AppIconWithFallback";
-import {useThemeMode} from "../ThemeProvider";
-import appIcons from "../appIcons.json";
-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: {},
-  emojis: {},
-  categories: [],
-  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;
-} & NimblePickerWithData;
-
-const i18n = {search: "Search icon...", notfound: "No Icons Found"};
-
-export const AppIconPicker = forwardRef<HTMLDivElement, AppIconPickerProps>(function AppIconPicker(
-  {borderless = true, color, getHoverColor, colors = cardTypeColors, onColorSelect, ...pickerProps},
-  ref
-) {
-  const themeMode = useThemeMode();
-
-  const alignedTheme = alignTheme(themeMode);
-
-  const customIcons = useMemo(
-    () =>
-      appIcons.map((icon) => {
-        return {
-          ...icon,
-          imageUrl: getThemedUrl(icon.file, alignedTheme),
-        };
-      }),
-    [alignedTheme]
-  );
-
-  return (
-    <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

@@ -1,58 +0,0 @@
-import {detectEmojiSupportLevel} from "../emoji-support";
-import type {Data} from "emoji-mart";
-
-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`;
-
-export const loadEmojiData = async () => {
-  const data = await import("@fibery/emoji-data/data/all.json");
-  return data.default;
-};
-
-const getAppleDataProps = async (): Promise<EmojiDataProps> => {
-  const [level, data] = await Promise.all([detectEmojiSupportLevel(), loadEmojiData()]);
-
-  return {
-    native: level >= 14,
-    // type declarations between @fibery/emoji-data and emoji-mart conflict a bit but they are compatible
-    data: data as unknown as Data,
-    backgroundImageFn,
-    set: "apple",
-    sheetColumns: 61,
-    sheetRows: 61,
-  };
-};
-const getTwitterDataProps = async (): Promise<EmojiDataProps> => {
-  const data = await loadEmojiData();
-
-  return {
-    native: false,
-    // type declarations between @fibery/emoji-data and emoji-mart conflict a bit but they are compatible
-    data: data as unknown as Data,
-    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/emoji/emoji.tsx

@@ -1,26 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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>
-  );
-};