@fibery/ui-kit 1.13.0 → 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/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';

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/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';

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

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

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