@fibery/ui-kit 1.15.0 → 1.17.0

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

@@ -6,6 +6,7 @@ import {space, textStyles} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import EmojiDelete from "../icons/react/EmojiDelete";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -27,7 +28,6 @@ export type IconEmojiPickerProps = React.PropsWithChildren<{
   onCustomEmojisSettings?: () => void;
   onReset?: () => void;
   resetLabel?: string;
-  createLabel?: string;
   defaultTab?: TabKey;
   showColorPickerOnTabs?: TabKey[];
   color?: string;
@@ -41,7 +41,6 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onCustomEmojisSettings,
   defaultTab,
   onReset,
-  createLabel = "Add Emoji",
   resetLabel = "Reset",
   showColorPickerOnTabs = ["icons", "emojis"],
   color,
@@ -62,21 +61,11 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
                 color={color}
                 onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
                 onCustomCategorySettings={onCustomEmojisSettings}
+                onAddCustomEmoji={onCreateClick}
                 getHoverColor={getHoverColor}
                 onSelect={onEmojiSelect}
                 showSkinTones
               />
-              {onCreateClick && (
-                <div
-                  className={css`
-                    padding: ${space.l}px;
-                  `}
-                >
-                  <Button size=":button-size/small" onClick={onCreateClick}>
-                    {createLabel}
-                  </Button>
-                </div>
-              )}
             </>
           ),
         },
@@ -100,7 +89,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
               padding-right: ${space.l}px;
             `}
           >
-            <Button size={":button-size/small"} onClick={onReset}>
+            <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
               {resetLabel}
             </Button>
           </div>

package/src/emoji-picker/primitives/category.tsx

@@ -1,9 +1,11 @@
-import {Category} from "@fibery/emoji-data";
-import {CSSProperties, css} from "@linaria/core";
+import {Category, EmojiItem} from "@fibery/emoji-data";
+import {css} from "@linaria/core";
 import {memo} from "react";
+import {useInView} from "react-intersection-observer";
 import {IconButton} from "../../Button/icon-button";
 import {space, textStyles, themeVars} from "../../designSystem";
 import {Settings} from "../../icons/react";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";
 import {Emoji} from "./emoji";
 import {emojiPadding} from "./layout";
@@ -24,7 +26,6 @@ const categoryLabelCss = css`
   align-items: center;
   gap: ${space.xs}px;
 
-  /* is required only because contentVisibility lifts emoji up */
   z-index: 1;
 `;
 
@@ -62,22 +63,89 @@ const NotFound = () => {
   );
 };
 
-type EmojiPickerCategoryProps = {
-  category: Category;
+type CategoryItemProps = {
+  id: string;
+  /** Custom renderer for emoji items */
+  renderEmoji?: (args: {emoji: EmojiItem}) => React.ReactNode;
+};
+
+const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
+  const skin = useEmojiSkin();
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const emojiContentSettings = useEmojiPickerContentSettings();
+
+  const emoji = useEmojiDataStoreSelector((store) => store.get(id));
+
+  if (!emoji) {
+    return null;
+  }
+
+  // TODO: title should be shown in preview in footer
+  const title = emoji.shortNames ? emoji.shortNames[0] : undefined;
+
+  return (
+    <IconButton
+      size="big"
+      onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
+      className={css`
+        &:hover:not(:disabled),
+        &:focus-visible {
+          background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+        }
+      `}
+      title={title}
+      aria-label={emoji.name}
+    >
+      {renderEmoji ? (
+        renderEmoji({emoji})
+      ) : (
+        <Emoji
+          emoji={id}
+          size={emojiContentSettings.emojiSize}
+          version={emojiPickerCtx.version}
+          skin={skin}
+          native={emojiPickerCtx.native}
+        />
+      )}
+    </IconButton>
+  );
 };
-export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({category}) {
+
+export type EmojiPickerCategoryProps = {
+  category: Category;
+
+  preRender?: boolean;
+  scrollParent: Element | null;
+} & Pick<CategoryItemProps, "renderEmoji">;
+
+export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({
+  category,
+  renderEmoji,
+  scrollParent,
+  preRender = false,
+}) {
   const i18n = useEmojiPickerI18N();
   const emojiPickerCtx = useEmojiPickerCtx();
   const emojiContentSettings = useEmojiPickerContentSettings();
 
+  const {ref, inView} = useInView({
+    root: scrollParent,
+    rootMargin: `129px 0px`, // grid height / 2
+    initialInView: preRender,
+    fallbackInView: true,
+    triggerOnce: true,
+  });
+
   const label = i18n.categories[category.id as keyof (typeof i18n)["categories"]] || category.name;
 
-  const skin = useEmojiSkin();
+  const emojiSize = emojiContentSettings.emojiSize + emojiPadding * 2;
 
   return (
     <section className={categoryCss} aria-label={label}>
       <div className={categoryLabelCss}>
-        <span aria-hidden={true /* already labeled by the section aria-label */}>{label}</span>
+        {/* already labeled by the section aria-label */}
+        <span aria-hidden={true}>{label}</span>
+
         {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
           <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
             <Settings iconSize={16} />
@@ -86,28 +154,17 @@ export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function Emoji
       </div>
 
       {category.emojis.length > 0 ? (
-        <ul className={categoryListCss}>
+        <ul ref={ref} className={categoryListCss}>
           {category.emojis.map((id) => {
             return (
               <li
-                style={
-                  // css-only virtualization until implementing the real one
-                  {
-                    contentVisibility: "auto",
-                    containIntrinsicSize: `${emojiContentSettings.emojiSize + emojiPadding * 2}px`,
-                  } as CSSProperties
-                }
                 key={id}
+                style={{
+                  width: emojiSize,
+                  height: emojiSize,
+                }}
               >
-                <Emoji
-                  onClick={emojiPickerCtx.onEmojiSelect}
-                  emoji={id}
-                  size={emojiContentSettings.emojiSize}
-                  version={emojiPickerCtx.version}
-                  skin={skin}
-                  tooltip
-                  native={emojiPickerCtx.native}
-                />
+                {inView ? <CategoryItem id={id} renderEmoji={renderEmoji} /> : null}
               </li>
             );
           })}

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

@@ -1,13 +1,13 @@
 import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
-import {border, themeVars} from "../../designSystem";
+import {themeVars} from "../../designSystem";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
-import {emojiPadding} from "./layout";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
   font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
     "Noto Color Emoji", "Android Emoji";
+  line-height: 1;
 `;
 const emojiWrapperSizedCss = css`
   display: inline-flex;
@@ -20,25 +20,12 @@ const emojiInlineImgCss = css`
   width: 1em;
   height: 1em;
   vertical-align: -0.1em;
+  object-fit: contain;
 `;
 const emojiSizedImgCss = css`
   width: 100%;
   height: 100%;
-`;
-
-const clickableCss = css`
-  padding: ${emojiPadding}px;
-  cursor: pointer;
-  font-size: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
-  border-radius: ${border.radius8}px;
-
-  &:hover {
-    background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
-  }
+  object-fit: contain;
 `;
 
 // This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
@@ -48,7 +35,6 @@ export type EmojiProps = {
   size?: number;
   /** id or colons */
   emoji: string;
-  tooltip?: boolean;
   /** max supported version of emojis */
   version?: number;
   onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
@@ -56,15 +42,7 @@ export type EmojiProps = {
   /** render emoji as native unicode if possible */
   native?: boolean;
 };
-export const Emoji: React.FC<EmojiProps> = ({
-  emoji: idOrColons,
-  tooltip,
-  size,
-  onClick,
-  version = 14,
-  skin,
-  native,
-}) => {
+export const Emoji: React.FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, skin, native}) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
   if (!emoji) {
@@ -101,30 +79,10 @@ export const Emoji: React.FC<EmojiProps> = ({
     );
   }
 
-  // TODO: use fibery's tooltip?
-  const title = tooltip ? emoji.shortNames[0] : undefined;
-
   const style = size ? {fontSize: size, width: size, height: size} : {};
 
-  return onClick ? (
-    <button
-      type="button"
-      onClick={(e) => onClick(emoji, e)}
-      className={cx(clickableCss)}
-      title={title}
-      aria-label={emoji.name}
-    >
-      <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}>
-        {emojiNode}
-      </span>
-    </button>
-  ) : (
-    <span
-      style={style}
-      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
-      title={title}
-      aria-label={emoji.name}
-    >
+  return (
+    <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)} aria-label={emoji.name}>
       {emojiNode}
     </span>
   );

package/src/emoji-picker/primitives/footer.tsx

@@ -2,8 +2,10 @@ import {css} from "@linaria/core";
 import {space} from "../../designSystem";
 
 const footerCss = css`
+  position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
-  padding: 0 ${space.s}px;
+  padding: ${space.m}px ${space.l}px;
+  min-height: 40px;
 `;
 
 export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {

package/src/emoji-picker/primitives/grid.tsx

@@ -1,45 +1,73 @@
-import {css} from "@linaria/core";
-import {useLayoutEffect, useMemo, useRef, useState} from "react";
-import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {css, cx} from "@linaria/core";
+import {useLayoutEffect, useMemo, useState} from "react";
+import {useEmojiDataStore, useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {get as getFrequentlyUsed} from "../utils/frequently";
-import {EmojiPickerCategory} from "./category";
+import {EmojiPickerCategory, EmojiPickerCategoryProps} from "./category";
 import {useEmojiPickerContentSettings} from "./content";
 import {contentHorizontalPadding} from "./layout";
 import {useFoundEmojis} from "./search-provider";
 
 const gridWrapperCss = css`
-  height: 238px;
+  height: 258px;
   overflow-y: scroll;
   overflow-x: hidden;
 
   padding: 0 ${contentHorizontalPadding}px;
 `;
 
-const AllCategories = () => {
+type AllCategoriesProps = Pick<EmojiPickerCategoryProps, "renderEmoji" | "scrollParent">;
+const AllCategories: React.FC<AllCategoriesProps> = ({renderEmoji, scrollParent}) => {
   const contentSettings = useEmojiPickerContentSettings();
 
-  // TODO: filter frequently used to not have zombie dom nodes
-  const [recentCategory] = useState(() => ({
-    id: "recent",
-    name: "Recent",
-    emojis: getFrequentlyUsed(contentSettings.perLine),
-  }));
-
+  const emojiData = useEmojiDataStore();
   const categories = useEmojiDataStoreSelector((store) => store.getCategories());
 
+  const recentCategory = useMemo(
+    () => ({
+      id: "recent",
+      name: "Recent",
+      emojis: getFrequentlyUsed(contentSettings.perLine).filter((id) => {
+        const emoji = emojiData.get(id);
+        const hidden = emoji && "hidden" in emoji ? emoji.hidden : false;
+        return emoji && !hidden;
+      }),
+    }),
+    [contentSettings, emojiData]
+  );
+
   return (
     <>
-      {recentCategory.emojis.length > 0 ? <EmojiPickerCategory category={recentCategory} /> : null}
-      {categories.map((category) => {
-        return <EmojiPickerCategory key={category.id} category={category} />;
-      })}
+      {recentCategory.emojis.length > 0 ? (
+        <EmojiPickerCategory
+          preRender
+          category={recentCategory}
+          scrollParent={scrollParent}
+          renderEmoji={renderEmoji}
+        />
+      ) : null}
+      {categories
+        .filter((category) => category.emojis.length !== 0)
+        .map((category, idx) => {
+          return (
+            <EmojiPickerCategory
+              preRender={idx < 2}
+              key={category.id}
+              category={category}
+              scrollParent={scrollParent}
+              renderEmoji={renderEmoji}
+            />
+          );
+        })}
     </>
   );
 };
+export type EmojiPickerGridProps = {
+  className?: string;
+} & Pick<EmojiPickerCategoryProps, "renderEmoji">;
 
-export const EmojiPickerGrid = () => {
+export const EmojiPickerGrid: React.FC<EmojiPickerGridProps> = ({className, renderEmoji}) => {
   const foundEmojis = useFoundEmojis();
-  const ref = useRef<HTMLDivElement>(null);
+  const [gridElement, setGridElement] = useState<HTMLDivElement | null>(null);
 
   const searchCategory = useMemo(
     () =>
@@ -54,14 +82,18 @@ export const EmojiPickerGrid = () => {
   );
 
   useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = 0;
+    if (gridElement) {
+      gridElement.scrollTop = 0;
     }
-  }, [foundEmojis]);
+  }, [foundEmojis, gridElement]);
 
   return (
-    <div ref={ref} className={gridWrapperCss}>
-      {searchCategory ? <EmojiPickerCategory category={searchCategory} /> : <AllCategories />}
+    <div ref={setGridElement} className={cx(gridWrapperCss, className)}>
+      {searchCategory ? (
+        <EmojiPickerCategory preRender scrollParent={gridElement} category={searchCategory} renderEmoji={renderEmoji} />
+      ) : (
+        <AllCategories scrollParent={gridElement} renderEmoji={renderEmoji} />
+      )}
     </div>
   );
 };

package/src/emoji-picker/primitives/search.tsx

@@ -13,6 +13,7 @@ import {useEmojiSkin} from "./skin-provider";
 
 const searchCss = css`
   ${textStyles.regular}
+  position: relative;
   width: 100%;
   background-color: ${themeVars.inputBgColor};
   box-shadow: ${themeVars.inputBorderColor};
@@ -22,7 +23,6 @@ const searchCss = css`
   display: flex;
   align-items: center;
   padding-left: ${space.l}px;
-  padding-right: ${space.m}px;
   gap: ${space.xxs}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
@@ -59,15 +59,23 @@ const searchIconCss = css`
   padding: ${space.xxs}px;
 `;
 
+const extraActionSlotCss = css`
+  background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
+  border-top-right-radius: ${space.s}px;
+  border-bottom-right-radius: ${space.s}px;
+`;
+
 export type EmojiPickerSearchProps = {
   autoFocus?: boolean;
 
   className?: string;
 
   searchRef?: React.RefObject<HTMLInputElement>;
+
+  extraAction?: React.ReactNode;
 };
 
-export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef}) => {
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef, extraAction}) => {
   const ref = useRef<HTMLInputElement>(null);
 
   const setRefs = useComposedRefs(ref, searchRef);
@@ -105,6 +113,16 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
 
   return (
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
+      {foundEmojis ? (
+        <IconButton size="small" onClick={clearSearch}>
+          <Close iconSize={16} />
+        </IconButton>
+      ) : (
+        <span className={searchIconCss}>
+          <Search iconSize={16} />
+        </span>
+      )}
+
       <input
         ref={setRefs}
         autoFocus={autoFocus}
@@ -127,15 +145,7 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
         {i18n.search}
       </label>
 
-      {foundEmojis ? (
-        <IconButton size="small" onClick={clearSearch}>
-          <Close iconSize={16} />
-        </IconButton>
-      ) : (
-        <span className={searchIconCss}>
-          <Search iconSize={16} />
-        </span>
-      )}
+      {extraAction ? <div className={extraActionSlotCss}>{extraAction}</div> : null}
     </section>
   );
 };

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -5,16 +5,13 @@ import {textStyles, themeVars} from "../../designSystem";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
+import {IconButton} from "../../Button/icon-button";
 
 const skinToneWrapperCss = css`
   display: flex;
   align-items: center;
   background-color: ${themeVars.actionMenuBg};
   font-size: 0;
-  line-height: 1.15;
-
-  /* magic constant until skin tone is removed from picker search bar */
-  height: 36px;
 `;
 
 const skinToneSwatchCss = css`
@@ -53,6 +50,7 @@ const openedSkinTextCss = css`
   display: inline-block;
   vertical-align: middle;
   ${textStyles.small};
+  line-height: 1.3;
 
   width: 98px;
   color: ${themeVars.accentTextColor};
@@ -76,20 +74,28 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
 
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
-        <span data-skin={skinTone}>
+        <IconButton
+          size="big"
+          onClick={() => {
+            if (opened) {
+              setSkin(skinTone as EmojiSkin);
+            }
+            setOpened(!opened);
+          }}
+          className={css`
+            &:hover:not(:disabled),
+            &:focus-visible {
+              background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+            }
+          `}
+        >
           <Emoji
-            onClick={() => {
-              if (opened) {
-                setSkin(skinTone as EmojiSkin);
-              }
-              setOpened(!opened);
-            }}
             emoji={`:hand::skin-tone-${skinTone}:`}
             version={emojiPickerCtx.version}
             native={emojiPickerCtx.native}
             size={20}
           />
-        </span>
+        </IconButton>
       </span>
     );
   }

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

@@ -28,7 +28,6 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
   };
 };
 
-// TODO: this should probably wrap the whole app so every component shares the same data
 const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
 
 export const EmojiDataStoreProvider: React.FC<

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

@@ -1,9 +1,7 @@
-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";
+import {RawCustomEmoji, makeEmojiData} from "@fibery/emoji-data";
+import {Suspense, lazy} from "react";
+import {EmojiDataStoreProvider} from "./emoji-data-store";
+import {getImageUrl} from "../../AppIconWithFallback";
 
 const EMPTY_DATA = {
   aliases: {},
@@ -13,27 +11,22 @@ const EMPTY_DATA = {
 };
 
 const LazyAppIcons = lazy(async () => {
-  const {default: appIcons} = await import("../../appIcons.json");
+  const appIconsEmojiData = makeEmojiData(EMPTY_DATA);
 
-  return {
-    default: function EmojiDataStore({children}: React.PropsWithChildren) {
-      const emojiDataStore = useEmojiDataStore();
-      const themeMode = useThemeMode();
-      const alignedTheme = alignTheme(themeMode);
+  const {default: appIcons} = await import("../../appIcons.json");
 
-      useEffect(() => {
-        // TODO: icons should be rendered as svg elements
-        const custom = appIcons.map((icon) => {
-          return {
-            ...icon,
-            imageUrl: getThemedUrl(icon.file, alignedTheme),
-          };
-        });
+  const custom = appIcons.map(
+    (appIcon): RawCustomEmoji => ({
+      ...appIcon,
+      imageUrl: getImageUrl(appIcon) as string,
+    })
+  );
 
-        emojiDataStore.setCustom(custom);
-      }, [alignedTheme, emojiDataStore]);
+  appIconsEmojiData.setCustom(custom);
 
-      return <>{children}</>;
+  return {
+    default: function EmojiDataStore({children}: React.PropsWithChildren) {
+      return <EmojiDataStoreProvider data={appIconsEmojiData}>{children}</EmojiDataStoreProvider>;
     },
   };
 });
@@ -43,13 +36,9 @@ export const LazyIconDataStore: React.FC<
     fallback: React.ReactNode;
   }>
 > = ({fallback, children}) => {
-  const [emojiData] = useState(() => makeEmojiData(EMPTY_DATA));
-
   return (
-    <EmojiDataStoreProvider data={emojiData}>
-      <Suspense fallback={fallback}>
-        <LazyAppIcons>{children}</LazyAppIcons>
-      </Suspense>
-    </EmojiDataStoreProvider>
+    <Suspense fallback={fallback}>
+      <LazyAppIcons>{children}</LazyAppIcons>
+    </Suspense>
   );
 };

package/src/icons/ast/AiAssistant.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AiAssistant: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M3.27.185a.29.29 0 0 0-.54 0l-.522 1.358c-.09.235-.12.305-.16.36a.614.614 0 0 1-.144.146c-.056.04-.126.069-.36.159L.184 2.73a.29.29 0 0 0 0 .54l1.358.522c.235.09.305.12.36.16.057.04.106.088.146.144.04.056.069.126.159.36l.522 1.359a.29.29 0 0 0 .54 0l.522-1.358c.09-.235.12-.305.16-.36a.614.614 0 0 1 .144-.146c.056-.04.126-.069.36-.159l1.359-.522a.29.29 0 0 0 0-.54l-1.358-.522c-.235-.09-.305-.12-.36-.16a.614.614 0 0 1-.146-.144c-.04-.056-.069-.126-.159-.36L3.27.184Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.833 1.7a.8.8 0 0 1 .747.513l1.445 3.757c.25.65.33.842.44.997.11.155.246.29.4.4.156.111.349.191.998.441l3.757 1.445a.8.8 0 0 1 0 1.494l-3.757 1.445c-.65.25-.842.33-.997.44-.155.11-.29.246-.4.4-.111.156-.191.348-.441.998l-1.445 3.757a.8.8 0 0 1-1.494 0L8.641 14.03c-.25-.65-.33-.842-.44-.997a1.699 1.699 0 0 0-.4-.4c-.156-.111-.348-.191-.998-.441l-3.757-1.445a.8.8 0 0 1 0-1.494l3.757-1.445c.65-.25.842-.33.998-.44a1.7 1.7 0 0 0 .4-.4c.11-.156.19-.349.44-.998l1.445-3.757a.8.8 0 0 1 .747-.513Zm0 3.028-.73 1.9c-.204.53-.356.926-.598 1.266a3.3 3.3 0 0 1-.777.778c-.341.242-.737.394-1.267.598l-1.9.73 1.901.73c.53.204.925.356 1.266.598.3.214.563.477.777.777.242.341.394.736.597 1.266l.731 1.9.731-1.9c.204-.53.355-.925.598-1.266.213-.3.476-.563.777-.777.34-.242.735-.394 1.265-.597l1.9-.731-1.898-.73c-.53-.204-.926-.356-1.267-.598a3.302 3.302 0 0 1-.777-.778c-.243-.34-.395-.736-.598-1.266l-.73-1.9Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M3 14a.29.29 0 0 1 .27.185l.522 1.358c.09.235.12.305.16.36.04.057.088.106.144.146.056.04.126.069.36.159l1.359.522a.29.29 0 0 1 0 .54l-1.358.522c-.235.09-.305.12-.36.16a.616.616 0 0 0-.146.144c-.04.056-.069.126-.159.36l-.522 1.359a.29.29 0 0 1-.54 0l-.522-1.359c-.09-.234-.12-.304-.16-.36a.616.616 0 0 0-.144-.145c-.056-.04-.126-.069-.36-.159L.184 17.27a.29.29 0 0 1 0-.54l1.358-.522c.235-.09.305-.12.36-.16a.614.614 0 0 0 .146-.144c.04-.056.069-.126.159-.36l.522-1.359A.29.29 0 0 1 3 14Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant"};
+const AiAssistant: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M3 0c.117 0 .221.072.263.181l.57 1.498a.844.844 0 0 0 .488.488l1.498.57a.281.281 0 0 1 0 .526l-1.498.57a.844.844 0 0 0-.488.488l-.57 1.498a.281.281 0 0 1-.526 0l-.57-1.498a.844.844 0 0 0-.488-.488L.18 3.263a.281.281 0 0 1 0-.526l1.498-.57a.844.844 0 0 0 .488-.488L2.737.18A.281.281 0 0 1 3 0ZM3 14c.117 0 .221.072.263.181l.57 1.498a.844.844 0 0 0 .488.488l1.498.57a.281.281 0 0 1 0 .526l-1.498.57a.844.844 0 0 0-.488.488l-.57 1.498a.281.281 0 0 1-.526 0l-.57-1.498a.844.844 0 0 0-.488-.488l-1.498-.57a.281.281 0 0 1 0-.526l1.498-.57a.844.844 0 0 0 .488-.488l.57-1.498A.281.281 0 0 1 3 14Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.7 2.483a.75.75 0 0 0-1.4 0L8.777 6.476a2.25 2.25 0 0 1-1.302 1.302L3.483 9.299a.75.75 0 0 0 0 1.402l3.993 1.521a2.25 2.25 0 0 1 1.302 1.302l1.521 3.993a.75.75 0 0 0 1.402 0l1.521-3.993a2.25 2.25 0 0 1 1.302-1.302l3.993-1.521a.75.75 0 0 0 0-1.402l-3.993-1.521a2.25 2.25 0 0 1-1.302-1.302l-1.521-3.993ZM10.18 7.01 11 4.857l.82 2.153a3.75 3.75 0 0 0 2.17 2.17l2.153.82-2.153.82a3.75 3.75 0 0 0-2.17 2.17L11 15.143l-.82-2.153a3.75 3.75 0 0 0-2.17-2.17L5.857 10l2.153-.82a3.75 3.75 0 0 0 2.17-2.17Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant"};
 
 export default AiAssistant;