@fibery/ui-kit 1.34.7 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.7",
+  "version": "1.35.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -77,8 +77,8 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.6.0",
     "@fibery/helpers": "1.3.0",
+    "@fibery/emoji-data": "2.6.0",
     "@fibery/react": "1.4.1"
   },
   "peerDependencies": {

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -27,6 +27,7 @@ type Props = React.PropsWithChildren<{
   contentClassName?: string;
   container?: HTMLElement | null;
   Icon?: FunctionComponent<IconBaseProps>;
+  onMouseEnter?: () => void;
 }>;
 
 const cornerCss = css`
@@ -56,6 +57,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   disabled = false,
   contentClassName,
   Icon,
+  onMouseEnter,
 }) => {
   const {MenuPrimitive, container} = useActionsMenuContext();
 
@@ -66,6 +68,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
         className={subTriggerClass}
         disabled={disabled}
         onClick={stopPropagation}
+        onMouseEnter={onMouseEnter}
       >
         <LeftCorner Icon={Icon} />
         <div className={contentStyle}>{trigger}</div>

package/src/antd/styles.ts

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../design-system";
+import {border, colors, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
 
 const inputVariables = {
   default: {
@@ -9,10 +9,10 @@ const inputVariables = {
     "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
   },
   error: {
-    "--input-border": themeVars.inputErrorBorderColor,
-    "--input-hover-border": themeVars.inputErrorBorderHoverColor,
-    "--input-focus-border": themeVars.inputErrorBorderFocusColor,
-    "--input-focus-shadow": themeVars.inputErrorBorderFocusShadow,
+    "--input-border": `0 0 0 1px ${themeVars.warning}`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.warning}`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.warning}`,
+    "--input-focus-shadow": `0 0 0 1px ${themeVars.warning}`,
   },
 };
 
@@ -43,7 +43,7 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow, 0 0 0 3px ${themeVars.focus}) !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {

package/src/button/base-button.tsx

@@ -29,7 +29,7 @@ export const baseButton = css`
 
   background-color: var(--fibery-button-color);
 
-  box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
+  box-shadow: inset 0 0 0 0.5px var(--fibery-button-border-color);
 
   &:hover:not(:disabled) {
     background-color: var(--fibery-button-hover-color);

package/src/button/icon-button.tsx

@@ -10,14 +10,14 @@ export type IconButtonProps = {
   pending?: boolean;
 } & BaseButtonProps;
 
-const iconButton = css`
+export const iconButton = css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${space.s2}px;
 `;
 
-const iconButtonSizes = {
+export const iconButtonSizes = {
   tiny: css`
     padding: ${space.s2}px;
     min-width: 20px;

package/src/design-system.ts

@@ -22,7 +22,7 @@ import {
 } from "./palette";
 import {ThemeMode} from "./theme-settings";
 
-export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
+export const typeSizes = [32, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
   light: 300,
@@ -106,15 +106,15 @@ const shades = getOpacities("#000000");
 const lights = getOpacities("#FFFFFF");
 
 export const separators = {
-  ..._.mapValues(shades, (shade) => `1px solid ${shade}`),
+  ..._.mapValues(shades, (shade) => `0.5px solid ${shade}`),
 } as const;
 
 export const inversedSeparators = {
-  ..._.mapValues(lights, (light) => `1px solid ${light}`),
+  ..._.mapValues(lights, (light) => `0.5px solid ${light}`),
 } as const;
 
 export const fontFamily =
-  "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+  '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
 
 const stateColors = {
   success: "rgba(8, 189, 159, 1)",
@@ -143,6 +143,12 @@ export const themeColors = {
   colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
 
   // Shadows and effects / Elevation
+  shadow50: [
+    `
+    0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}
+    `,
+    `0px 0px 0px 0.5px ${getOpacities(slateDark.slate12).opacity15}`,
+  ],
   shadow100: [
     `
     0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}
@@ -165,6 +171,30 @@ export const themeColors = {
       getOpacities(slate.slate12).opacity15
     }`,
   ],
+  shadow400: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${getOpacities(slate.slate12).opacity15}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
+  ],
+  shadow500: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${getOpacities(slate.slate12).opacity15}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
+  ],
+  shadow600: [
+    `
+    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${getOpacities(slate.slate12).opacity20}
+    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
+      getOpacities(slate.slate12).opacity20
+    }`,
+  ],
   actionMenuShadow: [
     `0px 0px 2px 0px ${getOpacities(slate.slate11).opacity30}, 0px 4px 6px 0px ${
       getOpacities(slate.slate11).opacity5
@@ -202,15 +232,15 @@ export const themeColors = {
   primaryBlue: [indigo.indigo9, indigoDark.indigo9],
   whiteColor: [whiteA.whiteA0, whiteA.whiteA0],
   blackColor: [blackA.blackA0, blackA.blackA0],
-  mainBg: [slate.slate3, slateDark.slate1],
-  panelBg: [whiteA.whiteA0, slateDark.slate2],
-  panelContentBg: [slate.slate2, slateDark.slate2],
+  mainBg: [slate.slate3, slateDark.slateBase],
+  panelBg: [whiteA.whiteA0, slateDark.slate1],
+  panelContentBg: [slate.slate2, slateDark.slate1],
   colorBgRelationContainer: [slate.slate2, slateDark.slate1],
   pageBg: [whiteA.whiteA0, slateDark.slate1],
   pageContentBg: [whiteA.whiteA0, slateDark.slate2],
   colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
   colorBgSidebar: [whiteA.whiteA0, slateDark.slate3],
-  menuBg: [slate.slate3, slateDark.slate1],
+  menuBg: [slate.slate3, slateDark.slateBase],
   menuTextColor: [slateDark.slate5, slate.slate8],
   menuItemHoverColor: [slate.slate5, slateDark.slate6],
   menuSelectedTextColor: [slate.slate2, slate.slate2],
@@ -298,7 +328,7 @@ export const themeColors = {
   colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
 
   // Actions menu
-  colorBgActionsMenu: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity85],
+  colorBgActionsMenu: [whiteA.whiteA0, slateDark.slate3],
   colorBgActionsMenuItemHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
   colorBgActionsMenuItemSelected: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
   colorBgActionsMenuItemSelectedHover: [
@@ -308,10 +338,10 @@ export const themeColors = {
   colorBgActionsMenuItemDangerHover: [getOpacities(red.red9).opacity10, getOpacities(redDark.red10).opacity10],
 
   colorBgActionsMenuItemDangerActive: [getOpacities(red.red9).opacity80, getOpacities(redDark.red10).opacity80],
-  actionMenuBg: [whiteA.whiteA0, slateDark.slate4],
-  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate5],
-  actionMenuHover: [slate.slate4, slateDark.slate6],
-  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate7).opacity50],
+  actionMenuBg: [whiteA.whiteA0, slateDark.slate3],
+  actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate4],
+  actionMenuHover: [slate.slate4, slateDark.slate5],
+  actionMenuInnerHover: [slate.slate4, getOpacities(slateDark.slate6).opacity50],
   actionMenuButtonColor: [whiteA.whiteA0, slateDark.slate2],
   actionMenuButtonHoverColor: [slate.slate1, slateDark.slate3],
   actionMenuButtonShadow: [
@@ -322,7 +352,8 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 6px 8px -4px ${getOpacities(slateDark.slate2).opacity30}`,
   ],
-  separatorColor: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
+  actionMenuSeparatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity15],
+  separatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity10],
   separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
   iconColor: [slate.slate10, slateDark.slate10],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
@@ -439,17 +470,17 @@ export const themeColors = {
   colorTextMenuItem: [slateDark.slate5, getOpacities(slateDark.slate12).opacity90],
   colorBgMenuItem: [transparent, transparent],
   // :hover
-  colorBgMenuItemHover: [slate.slate5, slateDark.slate4],
+  colorBgMenuItemHover: [slate.slate5, slateDark.slate2],
   // :focus
-  colorBgMenuItemFocus: [slate.slate6, slateDark.slate6],
+  colorBgMenuItemFocus: [slate.slate6, slateDark.slate5],
   // Selected
-  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo4],
+  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo3],
   // :hover
-  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
+  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo5],
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
+  colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo5],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
@@ -516,7 +547,7 @@ export const themeColors = {
   success: [teal.teal9, tealDark.teal9],
   danger: [red.red9, redDark.red10],
   active: [red.red9, redDark.red10],
-  warning: ["#FFD41E", "#FFD41E"],
+  warning: [yellow.yellow9, yellowDark.yellow8],
   cardBg: ["#FFFFFF", slateDark.slate6],
   cardSelected: ["#FFFB8F", slateDark.slate5],
   cardSelectedHover: ["rgba(240, 244, 247, 0.6)", slateDark.slate5],
@@ -544,7 +575,6 @@ export const themeColors = {
   gridHeaderTextColor: [slate.slate10, slateDark.slate11],
   gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
   gridCellBorderColor: [slate.slate5, slateDark.slate6],
-  gridPinnedCellBorderColor: [slate.slate8, slateDark.slate8],
   gridDisabledCellBgColor: [slate.slate2, slateDark.slate3],
   gridSelectedCellBgColor: [indigo.indigo3, indigoDark.indigo3],
   gridHighlightedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
@@ -553,6 +583,12 @@ export const themeColors = {
   gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
   gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
 
+  //timeline
+  timelineEntityHandleColor: [indigo.indigo7, indigoDark.indigo7],
+  timelineDependencyHoverBgColor: [indigo.indigo8, indigoDark.indigo8],
+  timelineDependencyOverlapBgColor: [red.red9, redDark.red9],
+  timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
+
   // #region buttons
   // solid
   colorBgButtonSolidAccentDefault: [indigo.indigo9, indigoDark.indigo9],
@@ -570,9 +606,12 @@ export const themeColors = {
     getOpacities(whiteA.whiteA0).opacity80,
     getOpacities(whiteA.whiteA0).opacity80,
   ],
+  colorIconButtonSolidAccent: [whiteA.whiteA0, whiteA.whiteA0],
+  colorIconButtonSolidNeutral: [whiteA.whiteA0, slateDark.slate8],
+  colorIconButtonSolidDestructive: [whiteA.whiteA0, whiteA.whiteA0],
   // outline
   colorBorderButtonOutlineAccentDefault: [indigo.indigo8, indigoDark.indigo8],
-  colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate8],
+  colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate7],
   colorBorderButtonOutlineDestructiveDefault: [red.red7, redDark.red7],
   colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
   colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo3],
@@ -592,6 +631,9 @@ export const themeColors = {
   ],
   colorTextButtonOutlineDestructive: [red.red11, redDark.red11],
   colorTextButtonOutlineDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonOutlineAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonOutlineNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonOutlineDestructive: [red.red11, redDark.red11],
   // soft
   colorBgButtonSoftAccentDefault: [indigo.indigo3, indigoDark.indigo4],
   colorBgButtonSoftAccentHover: [indigo.indigo5, indigoDark.indigo6],
@@ -608,11 +650,14 @@ export const themeColors = {
   colorTextButtonSoftNeutralActive: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
   colorTextButtonSoftDestructive: [red.red11, redDark.red11],
   colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonSoftNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonSoftDestructive: [red.red11, redDark.red11],
   // ghost
   colorBgButtonGhostAccentDefault: [transparent, transparent],
-  colorBgButtonGhostAccentHover: [indigo.indigo3, indigoDark.indigo3],
+  colorBgButtonGhostAccentHover: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
   colorBgButtonGhostNeutralDefault: [transparent, transparent],
-  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate6).opacity60, getOpacities(slateDark.slate6).opacity80],
+  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate7).opacity50, getOpacities(slateDark.slate6).opacity80],
   colorBgButtonGhostDestructiveDefault: [transparent, transparent],
   colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
   colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -624,6 +669,9 @@ export const themeColors = {
   colorTextButtonGhostNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
   colorTextButtonGhostDestructive: [red.red11, redDark.red11],
   colorTextButtonGhostDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  colorIconButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorIconButtonGhostNeutral: [slate.slate11, slateDark.slate11],
+  colorIconButtonGhostDestructive: [red.red11, redDark.red11],
   // #endregion
 
   colorBorderAccentFocusRing: [getOpacities(indigo.indigo9).opacity30, getOpacities(indigo.indigo9).opacity30],
@@ -655,20 +703,29 @@ export const themeColors = {
   colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
 
   //Whiteboard
-  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
+  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],
   instrumentsMenuShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 12px -2px ${getOpacities(slate.slate10).opacity15}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 12px -6px ${
-      getOpacities(slateDark.slate1).opacity15
-    }`,
+    `0px 0px 1px 0px ${getOpacities(slate.slate11).opacity20}, 0px 4px 6px 0px ${
+      getOpacities(slate.slate11).opacity5
+    }, 0px 3px 12px 0px ${getOpacities(slate.slate11).opacity10}`,
+    `0px 0px 1px 0px ${getOpacities(slateDark.slate6).opacity100}, 0px 4px 6px 0px ${
+      getOpacities(slateDark.slate1).opacity5
+    }, 0px 3px 12px 0px ${getOpacities(slateDark.slate1).opacity15}`,
   ],
   commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
+  commentsPanelShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
+  ],
 
   // SegmentedControl
   colorBgSegmentedControlDefault: [slate.slate3, slateDark.slate1],
   colorBgSegmentedControlActive: [slate.slate1, slateDark.slate6],
   colorBgSegmentedControlHover: [slate.slate5, slateDark.slate4],
   colorBorderSegmentedControlDefault: [slate.slate6, slateDark.slate7],
+
+  // Chargebee info
+  colorBgChargebeeInfoBox: [slate.slate3, slateDark.slate1],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -914,7 +971,7 @@ export const layout = {
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
   collapsedMenuMinWidth: 47,
-  menuMinWidth: 240, //TODO: make dependency to itemHeight
+  menuMinWidth: 284,
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 28, // I'm ok
@@ -1081,7 +1138,7 @@ export const textStyles = {
     fontSize: typeSizes[0],
     letterSpacing: "-0.01em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading2: {

package/src/dropdown-menu/index.tsx

@@ -76,7 +76,6 @@ const dropdownMenuContentStyles = css`
   min-width: 200px;
   box-shadow: ${themeVars.actionMenuShadow};
   border-radius: ${border.radius8}px;
-  backdrop-filter: ${themeVars.effectBgActionsMenu};
   background-color: ${themeVars.colorBgActionsMenu};
 
   @media (prefers-reduced-motion: no-preference) {
@@ -159,8 +158,8 @@ export const Item = styled(DropdownMenuPrimitive.Item)`
 
 export const Separator = styled(DropdownMenuPrimitive.Separator)`
   ${{
-    backgroundColor: themeVars.separatorColor,
-    height: 1,
+    backgroundColor: themeVars.actionMenuSeparatorColor,
+    height: 0.5,
     margin: `${space.s4}px 0`,
   }}
 `;

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

@@ -18,6 +18,7 @@ export type AppIconPickerProps = {
 
   onSelect: (emoji: EmojiItem) => void;
   autoFocus?: boolean;
+  showColorPicker?: boolean;
 };
 export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onSelect,

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -23,7 +23,7 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   const themeMode = useThemeMode();
   const iconColor = color ? getIconColor(themeMode, color) : undefined;
 
-  const Icon = opened ? ColorCodingFilled : ColorCoding;
+  const Icon = opened ? ColorCoding : ColorCodingFilled;
 
   const label = opened ? "Hide color picker" : "Show color picker";
 

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

@@ -3,6 +3,7 @@ import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {useEmojiRenderConfig} from "./render-config-provider";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
@@ -67,7 +68,7 @@ export const Emoji: FC<EmojiProps> = ({
   showTitle = false,
 }) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
-
+  const config = useEmojiRenderConfig();
   if (!emoji) {
     return fallback === "shortcode" ? <>{idOrColons}</> : null;
   }
@@ -95,7 +96,8 @@ export const Emoji: FC<EmojiProps> = ({
     emojiNode = (
       <img
         alt={emoji.name}
-        loading="lazy"
+        loading={config.loading}
+        draggable={config.draggable}
         className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
         src={emoji.imageUrl}
       />

package/src/emoji-picker/primitives/render-config-provider.tsx

@@ -0,0 +1,12 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+type RenderConfig = {loading: "lazy" | "eager"; draggable: "false" | "true"};
+
+const [ValueProvider, useValueCtx] = createContext<RenderConfig>("EmojiRenderConfigProvider", {
+  loading: "lazy",
+  draggable: "false",
+});
+
+export {ValueProvider as EmojiRenderConfigProvider};
+
+export const useEmojiRenderConfig = useValueCtx;

package/src/icons/ast/AddDatabase.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddDatabase: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M5.835 8.738c-.35-.17-.66-.37-.92-.603C4.454 7.725 4 7.045 4 6.401 4 4.002 6.686 3 10 3s6 .972 6 3.4c0 .65-.448 1.332-.91 1.746-.262.233-.572.433-.925.603-1.079.52-2.547.751-4.165.751-1.618 0-3.086-.239-4.165-.762ZM2.5 13.599c0 1.904 1.127 3.202 2.58 3.938 1.46.74 3.347.991 5.215.96a.723.723 0 0 0 .705-.73.78.78 0 0 0-.797-.768c-1.94.023-4.927-.181-5.93-2.187a2.783 2.783 0 0 1-.257-1.528c.017-.16.046-.313.088-.46.406.396.89.703 1.405.939 1.498.688 3.213.837 4.844.804a.666.666 0 0 0 .647-.673.715.715 0 0 0-.733-.705c-1.499.024-3.105-.103-4.468-.778a3.92 3.92 0 0 1-.93-.626c-.264-.244-.71-.72-.795-1.083A2.868 2.868 0 0 1 4 10.044c0-.276.036-.535.104-.775.394.384.871.694 1.405.939 1.256.577 2.85.808 4.491.808 1.638 0 3.232-.224 4.49-.797a4.934 4.934 0 0 0 1.41-.94c.034.122.06.25.076.382.025.196.024.392.024.589a.75.75 0 0 0 1.5 0V6.4c0-1.914-1.122-3.215-2.583-3.95-1.385-.697-3.153-.95-4.917-.95-1.77 0-3.538.262-4.92.963C3.626 3.199 2.5 4.497 2.5 6.4v7.198Zm13.25-.849a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-database"};
+
+export default AddDatabase;

package/src/icons/ast/AddIntegration.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AddIntegration: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"m8.435 6.627-.7-.7a.803.803 0 0 1 0-1.136l.634-.634a5.283 5.283 0 0 1 6.861-.523l1.376-1.375a.804.804 0 1 1 1.135 1.135L16.366 4.77c1.022 1.394 1.296 3.324.709 4.983-.148.419-.674.592-1.075.348-.358-.218-.48-.672-.375-1.077.375-1.45.044-2.77-.918-3.731a3.655 3.655 0 0 0-5.203 0l-.066.066L13.076 9A.81.81 0 0 1 12 10.21L9.57 7.761l-.699.7a.803.803 0 1 1-1.135-1.136l.699-.7Zm1.272 10.451a5.305 5.305 0 0 1-4.952-.698l-1.377 1.378a.805.805 0 0 1-1.318-.256.803.803 0 0 1 .182-.88l1.378-1.377a5.283 5.283 0 0 1 .523-6.862l.634-.634a.803.803 0 0 1 1.135 0l4.182 4.17A.804.804 0 0 1 9 13.095L5.344 9.452l-.066.067a3.658 3.658 0 0 0 0 5.203c.922.922 2.407 1.14 3.667.84.486-.114 1.029.111 1.18.587.12.377-.046.793-.418.93Zm6.043-4.328a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-integration"};
+
+export default AddIntegration;

package/src/icons/ast/AiSearch.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AiSearch: 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":"M13.128 14.32a7.085 7.085 0 1 1 1.182-1.18l3.78 3.769a.835.835 0 1 1-1.18 1.182l-3.782-3.77ZM8.75 3.335a5.415 5.415 0 1 0 0 10.83 5.415 5.415 0 0 0 0-10.83Zm0 2.415c.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 .263-.181Z"},"children":[]}],"metadata":""}]},"name":"ai-search"};
+
+export default AiSearch;

package/src/icons/ast/Clean.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Clean: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM6 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM4.5 7.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"m14.64 8.422 3.89-3.892a.75.75 0 0 0-1.06-1.06l-3.892 3.89-.604-.603a2.25 2.25 0 0 0-2.846-.277l-6.546 4.397a.75.75 0 0 0 .002 1.247c1.099.733 1.733 1.586 2.423 2.515.17.228.342.46.526.697.934 1.2 2.064 2.336 4.285 2.892a.75.75 0 0 0 .82-.333l3.834-6.186a2.25 2.25 0 0 0-.322-2.777l-.51-.51Zm-3.675-.697a.75.75 0 0 1 .948.092l2.176 2.176a.75.75 0 0 1 .107.926l-.465.751L10.259 8.2l.706-.474ZM8.99 9.05l3.928 3.929-2.257 3.642c-1.438-.474-2.213-1.266-2.945-2.207a20.49 20.49 0 0 1-.25-.329.748.748 0 0 0 .063-.056l1-1a.75.75 0 1 0-1.06-1.06l-.914.913c-.363-.45-.775-.909-1.272-1.342l3.707-2.49Z"},"children":[]}],"metadata":""}]},"name":"clean"};
+
+export default Clean;

package/src/icons/ast/CollapseAll.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const CollapseAll: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M7 3.5a.8.8 0 1 0-1.131 1.131l3.565 3.335a.8.8 0 0 0 1.132 0L14.13 4.63A.8.8 0 0 0 13 3.5l-3 2.769L7 3.5Zm6 13.237a.8.8 0 1 0 1.131-1.131l-3.565-3.572a.8.8 0 0 0-1.132 0L5.87 15.606A.8.8 0 1 0 7 16.737l3-3.006 3 3.006Z"},"children":[]}],"metadata":""}]},"name":"collapse-all"};
+
+export default CollapseAll;

package/src/icons/ast/CreditsFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const CreditsFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.536.976 3.577 3.284c-.918.535-1.377.803-1.71 1.177a3.208 3.208 0 0 0-.656 1.147c-.154.479-.154 1.014-.154 2.084v4.616c0 1.07 0 1.605.154 2.084.137.426.36.816.656 1.147.333.374.792.642 1.71 1.177l3.96 2.308c.918.535 1.376.803 1.866.907a3.14 3.14 0 0 0 1.31 0c.487-.104.947-.372 1.865-.907l3.96-2.308c.918-.535 1.376-.803 1.71-1.178.295-.331.519-.722.656-1.146.153-.479.153-1.014.153-2.084V7.692c0-1.07 0-1.605-.153-2.085a3.207 3.207 0 0 0-.656-1.146c-.334-.374-.792-.642-1.71-1.177L12.578.976C11.66.441 11.201.173 10.712.07a3.14 3.14 0 0 0-1.31 0c-.488.104-.947.372-1.866.907Zm1.517 8.066c-.297-.033-.473-.244-.473-.544 0-.3.177-.511.473-.545 1.31-.184 1.958-.276 2.32-.65.357-.368.438-1.01.595-2.282.045-.3.254-.489.55-.489.298 0 .496.19.54.489.158 1.272.237 1.914.594 2.282.364.374 1.012.466 2.322.65.135.008.262.07.352.172.091.102.138.236.131.373 0 .3-.187.51-.483.544-1.31.185-1.958.276-2.322.65-.357.369-.436 1.01-.594 2.282-.044.3-.242.49-.54.49-.296 0-.504-.19-.549-.49-.158-1.272-.238-1.913-.594-2.281-.364-.375-1.012-.466-2.322-.651Z","fill":"#EBBC00"},"children":[]}],"metadata":""}]},"name":"credits-filled"};
+
+export default CreditsFilled;

package/src/icons/ast/DatabaseOff.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const DatabaseOff: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m5.198 4.138 5.353 5.353c1.4-.048 2.66-.282 3.614-.742.353-.17.663-.37.924-.603.463-.414.911-1.097.911-1.745C16 3.97 13.314 3 10 3c-1.964 0-3.707.352-4.802 1.138Zm6.76 6.758 1.74 1.742c.176-.066.344-.137.503-.216.358-.176.672-.384.934-.627.263-.244.706-.72.79-1.082a3.081 3.081 0 0 0 .051-1.052 2.735 2.735 0 0 0-.075-.383 4.934 4.934 0 0 1-1.41.941c-.747.34-1.612.557-2.534.677Zm2.765 2.766 1.053 1.054c.146-.332.224-.703.224-1.117a2.763 2.763 0 0 0-.1-.766 4.78 4.78 0 0 1-1.177.83Zm2.162 2.162.895.896a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 1.06-1.06l.849.848a5.58 5.58 0 0 1 .95-.605C6.462 1.762 8.23 1.5 10 1.5c1.764 0 3.532.253 4.917.95 1.46.735 2.583 2.036 2.583 3.95v7.2c0 .865-.23 1.605-.615 2.224ZM2.5 6.4c0-.328.384-.456.616-.224L6.11 9.17c.534.535.085 1.353-.601 1.038a4.973 4.973 0 0 1-1.405-.939 2.676 2.676 0 0 0-.078.38 2.993 2.993 0 0 0 .048 1.053c.085.362.531.84.795 1.083.26.242.574.45.93.626 1.23.609 2.662.77 4.026.78a.744.744 0 0 1 .521.216l.076.076c.407.407.154 1.088-.422 1.088-1.64 0-3.235-.231-4.491-.808a4.978 4.978 0 0 1-1.405-.939A2.703 2.703 0 0 0 4 13.6c0 .454.096.857.274 1.213C5.038 16.341 7.312 17 10 17c1.093 0 2.117-.106 3-.334a.845.845 0 0 1 .812.207c.393.392.265 1.05-.27 1.2-1.097.306-2.32.427-3.542.427-1.77 0-3.538-.262-4.92-.963-1.453-.736-2.58-2.034-2.58-3.938V6.401Z"},"children":[]}],"metadata":""}]},"name":"database-off"};
+
+export default DatabaseOff;

package/src/icons/ast/Dependency.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Dependency: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M9 3.75A.75.75 0 0 1 9.75 3h7.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-7.5A.75.75 0 0 1 9 5.25v-1.5Zm-7 11a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-1.5ZM14.75 8V7h-1.5v1c0 .69-.56 1.25-1.25 1.25H8A2.75 2.75 0 0 0 5.25 12v1h1.5v-1c0-.69.56-1.25 1.25-1.25h4A2.75 2.75 0 0 0 14.75 8Z"},"children":[]}],"metadata":""}]},"name":"dependency"};
+
+export default Dependency;

package/src/icons/ast/Gift.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Gift: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.03 2.972a1.027 1.027 0 0 0-.001 2.054h2.47a5.925 5.925 0 0 0-.341-.627C7.65 3.593 6.959 2.972 6.03 2.972Zm2.803 3.554v1.546H3.237a.265.265 0 0 1-.265-.266V6.791c0-.146.119-.265.265-.265h5.596Zm-5.113-1.5a2.527 2.527 0 0 1 2.31-3.554c1.699 0 2.785 1.156 3.397 2.127.055.088.107.175.156.261a6.95 6.95 0 0 1 .157-.26c.611-.972 1.698-2.128 3.397-2.128a2.527 2.527 0 0 1 2.31 3.554h.482c.975 0 1.765.79 1.765 1.765v1.015c0 .975-.79 1.766-1.765 1.766h-.265v5.342a2.78 2.78 0 0 1-2.78 2.78h-6.6a2.78 2.78 0 0 1-2.781-2.78V9.572h-.266c-.974 0-1.765-.79-1.765-1.766V6.791c0-.975.79-1.765 1.765-1.765h.483Zm1.283 4.546v5.342c0 .707.573 1.28 1.28 1.28h2.55V9.572h-3.83Zm5.33 0v6.622h2.55a1.28 1.28 0 0 0 1.28-1.28V9.572h-3.83Zm5.596-1.5a.265.265 0 0 0 .265-.266V6.791a.265.265 0 0 0-.265-.265h-5.596v1.546h5.596Zm-2.791-3.046h-2.471c.094-.2.208-.415.342-.627.508-.806 1.199-1.427 2.128-1.427a1.027 1.027 0 0 1 0 2.054Z"},"children":[]}],"metadata":""}]},"name":"gift"};
+
+export default Gift;

package/src/icons/ast/ManyPeople.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ManyPeople: 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":"M5.25 2a1.583 1.583 0 1 0 0 3.167A1.583 1.583 0 0 0 5.25 2ZM3.478 8.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 0 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 0 0 1.456.362ZM14.75 2a1.583 1.583 0 1 0 0 3.167 1.583 1.583 0 0 0 0-3.167Zm-1.772 6.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 0 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 0 0 1.456.362Zm.189 2.82a1.583 1.583 0 1 1 3.167 0 1.583 1.583 0 0 1-3.167 0Zm1.583 4.083c-.982 0-1.64.563-1.772 1.097a.75.75 0 1 1-1.456-.362c.34-1.367 1.742-2.235 3.228-2.235 1.486 0 2.888.868 3.228 2.235a.75.75 0 1 1-1.456.362c-.132-.534-.79-1.097-1.772-1.097ZM5.25 10a1.583 1.583 0 1 0 0 3.167 1.583 1.583 0 0 0 0-3.167Zm-1.772 6.764c.133-.534.79-1.097 1.772-1.097s1.64.563 1.772 1.097a.75.75 0 1 0 1.456-.362c-.34-1.367-1.742-2.235-3.228-2.235-1.486 0-2.888.868-3.228 2.235a.75.75 0 1 0 1.456.362Z"},"children":[]}],"metadata":""}]},"name":"many-people"};
+
+export default ManyPeople;

package/src/icons/ast/Markdown.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Markdown: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.5 5.25a.75.75 0 0 1 .75-.75h13.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H3.25a.75.75 0 0 1-.75-.75v-9.5ZM3.25 3A2.25 2.25 0 0 0 1 5.25v9.5A2.25 2.25 0 0 0 3.25 17h13.5A2.25 2.25 0 0 0 19 14.75v-9.5A2.25 2.25 0 0 0 16.75 3H3.25Zm1.17 4.052a.682.682 0 0 1 .744.148L6.5 8.536 7.836 7.2A.682.682 0 0 1 9 7.682v4.636a.682.682 0 0 1-1.364 0v-2.99l-.654.654a.682.682 0 0 1-.964 0l-.654-.654v2.99a.682.682 0 0 1-1.364 0V7.682c0-.276.166-.525.42-.63ZM13.5 7c.377 0 .682.305.682.682v2.99l.654-.654a.682.682 0 1 1 .964.964L13.982 12.8a.682.682 0 0 1-.964 0L11.2 10.982a.682.682 0 1 1 .964-.964l.654.654v-2.99c0-.377.305-.682.682-.682Z"},"children":[]}],"metadata":""}]},"name":"markdown"};
+
+export default Markdown;

package/src/icons/ast/PeopleCheck.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const PeopleCheck: 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":"M13.156 5.65a3.65 3.65 0 1 0-7.3 0 3.65 3.65 0 0 0 7.3 0Zm-1.5 0a2.15 2.15 0 1 0-4.3 0 2.15 2.15 0 0 0 4.3 0Zm-6.8 10.85c-.215 0-.33-.144-.338-.27-.035-.529-.024-1.083.08-1.45.269-.935.899-1.565 1.768-1.978.691-.328 1.522-.51 2.392-.575.414-.03.75-.363.75-.777a.714.714 0 0 0-.75-.726c-1.041.066-2.104.28-3.035.723-1.175.557-2.156 1.489-2.566 2.92-.18.63-.172 1.405-.136 1.96C3.086 17.33 3.941 18 4.856 18h3.9a.75.75 0 0 0 0-1.5h-3.9Zm10.69-5.5a.868.868 0 0 0-.72.356l-2.238 2.95-1.075-1.125-.001-.001a.882.882 0 0 0-.646-.265c-.447 0-.86.33-.86.83 0 .204.08.424.214.564l1.756 1.824c.18.195.456.267.667.267.278 0 .547-.105.706-.307l2.876-3.779.001-.001a.839.839 0 0 0 .18-.492c0-.482-.414-.821-.86-.821Z"},"children":[]}],"metadata":""}]},"name":"people-check"};
+
+export default PeopleCheck;

package/src/icons/ast/PresentPlay.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const PresentPlay: 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":"M8.699 6.484a1.31 1.31 0 0 0-1.97 1.131v4.77a1.31 1.31 0 0 0 1.97 1.132l4.089-2.384a1.31 1.31 0 0 0 0-2.265l-4.09-2.384ZM11.752 10 8.23 7.946v4.109l3.523-2.054Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.24 2.25a2.99 2.99 0 0 0-2.99 2.99v9.52a2.99 2.99 0 0 0 2.99 2.99h9.52a2.99 2.99 0 0 0 2.99-2.99V5.24a2.99 2.99 0 0 0-2.99-2.99H5.24ZM3.75 5.24c0-.823.667-1.49 1.49-1.49h9.52c.823 0 1.49.667 1.49 1.49v9.52a1.49 1.49 0 0 1-1.49 1.49H5.24a1.49 1.49 0 0 1-1.49-1.49V5.24Z"},"children":[]}],"metadata":""}]},"name":"present-play"};
+
+export default PresentPlay;

package/src/icons/ast/PresentStop.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const PresentStop: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.25 3h-8.5A2.75 2.75 0 0 0 3 5.75v8.5A2.75 2.75 0 0 0 5.75 17h8.5A2.75 2.75 0 0 0 17 14.25v-8.5A2.75 2.75 0 0 0 14.25 3Z"},"children":[]}],"metadata":""}]},"name":"present-stop"};
+
+export default PresentStop;

package/src/icons/ast/SendArrow.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SendArrow: 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":"M10 3.85c.307 0 .6.123.816.34l4.25 4.286a1.15 1.15 0 1 1-1.633 1.62L11.15 7.793V15a1.15 1.15 0 0 1-2.3 0V7.793l-2.283 2.303a1.15 1.15 0 1 1-1.634-1.62l4.25-4.286c.216-.217.51-.34.817-.34Z"},"children":[]}],"metadata":""}]},"name":"send-arrow"};
+const SendArrow: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.707 3.293a1 1 0 0 0-1.415 0L4.57 8.015A1 1 0 1 0 5.984 9.43l3.014-3.013V16a1 1 0 1 0 2 0V6.413l3.017 3.016a1 1 0 1 0 1.414-1.414l-4.722-4.722Z"},"children":[]}],"metadata":""}]},"name":"send-arrow"};
 
 export default SendArrow;