@fibery/ui-kit 1.12.2 → 1.14.0

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/MessagePlusSquare.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MessagePlusSquare: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.75 6.25a.75.75 0 0 0-1.5 0V8H7.5a.75.75 0 0 0 0 1.5h1.75v1.75a.75.75 0 0 0 1.5 0V9.5h1.75a.75.75 0 0 0 0-1.5h-1.75V6.25Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.531 1.75H6.47c-.674 0-1.224 0-1.672.037-.463.037-.882.118-1.272.317a3.25 3.25 0 0 0-1.42 1.42c-.2.391-.28.81-.318 1.273-.037.448-.037.998-.037 1.672v5.306c0 .67 0 1.15.11 1.566A3.25 3.25 0 0 0 4.16 15.64c.27.072.566.098.924.107v1.228c0 .198 0 .394.015.554.014.153.05.428.24.666.222.278.558.44.913.44.305-.001.542-.145.67-.23a6.55 6.55 0 0 0 .442-.334l2.01-1.608c.43-.343.565-.447.708-.52.14-.072.29-.125.444-.156.157-.032.328-.036.878-.036h2.128c.674 0 1.225 0 1.672-.037.463-.037.882-.118 1.273-.317a3.25 3.25 0 0 0 1.42-1.42c.199-.391.28-.81.317-1.273.037-.447.037-.998.037-1.672V6.47c0-.674 0-1.224-.037-1.672-.037-.463-.118-.882-.317-1.272a3.25 3.25 0 0 0-1.42-1.42c-.391-.2-.81-.28-1.273-.318-.447-.037-.998-.037-1.671-.037ZM4.207 3.44c.144-.073.343-.128.713-.158.38-.031.869-.032 1.581-.032h7c.713 0 1.202 0 1.581.032.37.03.57.085.713.159.33.168.598.435.765.765.074.144.13.343.16.713.03.38.031.869.031 1.581V11c0 .712 0 1.202-.032 1.58-.03.371-.085.57-.159.714a1.75 1.75 0 0 1-.765.765c-.144.074-.343.13-.713.16-.38.03-.868.031-1.58.031h-2.165c-.455 0-.788 0-1.112.066a3.248 3.248 0 0 0-.826.29c-.295.15-.554.358-.91.643l-1.905 1.524V15a.75.75 0 0 0-.75-.75c-.823 0-1.087-.006-1.286-.06a1.75 1.75 0 0 1-1.237-1.237c-.053-.199-.06-.463-.06-1.286V6.5c0-.712 0-1.202.032-1.58.03-.371.085-.57.159-.714a1.75 1.75 0 0 1 .765-.765Z"},"children":[]}],"metadata":""}]},"name":"message-plus-square"};
+
+export default MessagePlusSquare;

package/src/icons/ast/UsbFlashDrive.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UsbFlashDrive: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M9.083 4.167a.75.75 0 0 0-1.5 0V5a.75.75 0 1 0 1.5 0v-.833ZM12.417 4.167a.75.75 0 0 0-1.5 0V5a.75.75 0 0 0 1.5 0v-.833Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.309.917c-.212 0-.414 0-.584.013-.185.015-.398.05-.61.16-.298.15-.54.393-.692.691a1.602 1.602 0 0 0-.16.61c-.013.17-.013.372-.013.584v3.902a1.979 1.979 0 0 0-.347.136A2.417 2.417 0 0 0 2.847 8.07c-.154.301-.212.617-.238.94a14.88 14.88 0 0 0-.026 1.127v4.228c0 .673 0 1.224.037 1.671.038.464.119.882.318 1.273a3.25 3.25 0 0 0 1.42 1.42c.39.2.81.28 1.272.318.448.036.999.036 1.672.036h5.396c.674 0 1.224 0 1.672-.036.463-.038.882-.119 1.272-.318a3.25 3.25 0 0 0 1.42-1.42c.2-.39.28-.81.318-1.273.037-.447.037-.998.037-1.671v-4.228c0-.441 0-.817-.025-1.126-.027-.324-.085-.64-.239-.941a2.417 2.417 0 0 0-1.056-1.057 1.978 1.978 0 0 0-.347-.136V2.975c0-.212 0-.414-.014-.584a1.603 1.603 0 0 0-.159-.61 1.583 1.583 0 0 0-.691-.692 1.602 1.602 0 0 0-.61-.159 7.607 7.607 0 0 0-.585-.013H6.31ZM14.25 6.75V3c0-.246 0-.385-.009-.486a.692.692 0 0 0-.007-.064.083.083 0 0 0-.018-.017.707.707 0 0 0-.063-.008 6.87 6.87 0 0 0-.486-.008H6.333c-.245 0-.385 0-.486.008a.702.702 0 0 0-.063.008.083.083 0 0 0-.018.017.707.707 0 0 0-.007.064A6.87 6.87 0 0 0 5.75 3v3.75H14.25Zm-9.666 1.6c.055-.028.151-.06.383-.08.24-.02.554-.02 1.033-.02h8c.48 0 .793 0 1.034.02.231.02.327.052.382.08a.917.917 0 0 1 .4.4c.029.055.062.152.08.383.02.24.02.555.02 1.034v4.166c0 .713 0 1.202-.03 1.581-.031.37-.086.57-.16.714a1.75 1.75 0 0 1-.765.765c-.144.073-.343.128-.713.159-.38.03-.869.031-1.581.031H7.334c-.713 0-1.202 0-1.581-.031-.37-.03-.57-.086-.714-.16a1.75 1.75 0 0 1-.765-.764c-.073-.144-.129-.343-.159-.714-.03-.379-.032-.868-.032-1.58v-4.167c0-.48.001-.794.02-1.034.02-.231.052-.328.08-.382a.917.917 0 0 1 .401-.401Z"},"children":[]}],"metadata":""}]},"name":"usb-flash-drive"};
+
+export default UsbFlashDrive;

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';
@@ -80,6 +86,7 @@ export { default as Levels } from './Levels';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';
+export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
 export { default as Minus } from './Minus';
 export { default as MoreCompact } from './MoreCompact';
@@ -186,6 +193,7 @@ export { default as TypeSingleSelect } from './TypeSingleSelect';
 export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
+export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

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/MessagePlusSquare.tsx

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

package/src/icons/react/UsbFlashDrive.tsx

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

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';
@@ -80,6 +86,7 @@ export { default as Levels } from './Levels';
 export { default as Lock } from './Lock';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';
+export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
 export { default as Minus } from './Minus';
 export { default as MoreCompact } from './MoreCompact';
@@ -186,6 +193,7 @@ export { default as TypeSingleSelect } from './TypeSingleSelect';
 export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
+export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

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>
-  );
-};

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

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

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

@@ -1,216 +0,0 @@
-import {CSSProperties, css, cx} from "@linaria/core";
-import "emoji-mart/css/emoji-mart.css";
-import {forwardRef} from "react";
-import {useTheme, useThemeMode} from "../ThemeProvider";
-import {border, fontFamily, space, textStyles, themeVars} from "../designSystem";
-
-import {NimblePickerProps, NimblePicker as Picker} from "emoji-mart";
-import {alignTheme} from "../theme-settings";
-
-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: 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;
-    height: 238px;
-  }
-
-  .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(--fibery-emoji-hover-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: 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: 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`
-  .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;
-  emojiHoverColor?: string;
-}>;
-
-export const EmojiMartWrapper = forwardRef<HTMLDivElement, EmojiMartWrapperProps>(function EmojiMartWrapper(
-  {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,
-        shortSearch && emojiMartWithShortSearchCss
-      )}
-    >
-      {children}
-    </div>
-  );
-});