Merge branch 'develop' into fix/clipboard

apps/ligo-virgo/src/pages/tools/icons/Icons.tsx

@@ -3,7 +3,7 @@ import * as uiIcons from '@toeverything/components/icons';
 import { message, styled } from '@toeverything/components/ui';
 import { copy } from './copy';
 
-const IconBooth: FC<{ name: string; Icon: FC<any> }> = ({ name, Icon }) => {
+const IconBooth = ({ name, Icon }: { name: string; Icon: FC<any> }) => {
     const on_click = () => {
         copy(`<${name} />`);
         message.success('Copied ~');
@@ -18,7 +18,7 @@ const IconBooth: FC<{ name: string; Icon: FC<any> }> = ({ name, Icon }) => {
 
 const _icons = Object.entries(uiIcons).filter(([key]) => key !== 'timestamp');
 
-export const Icons: FC = () => {
+export const Icons = () => {
     const ref = useRef<HTMLHeadingElement>(null);
     return (
         <Container>

libs/components/account/src/login/index.tsx

@@ -49,14 +49,14 @@ export function Login() {
                             width: '100px',
                         }}
                     />
-                    {/* {((process.env['NX_LOCAL'] || true) && ( */}
+                    {(process.env['NX_LOCAL'] && (
-                    <FileSystem onError={onError} />
+                        <FileSystem onError={onError} />
-                    {/* )) ||
+                    )) ||
-                    null}
+                        null}
-                {((!process.env['NX_LOCAL'] || true) && ( */}
+                    {(!process.env['NX_LOCAL'] && (
-                    <Firebase onError={onError} />
+                        <Firebase onError={onError} />
-                    {/* )) ||
+                    )) ||
-                    null} */}{' '}
+                        null}
                 </MuiBox>
             </MuiGrid>
         </MuiGrid>

libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx

@@ -34,10 +34,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
     return max[0];
 };
 
-export const BorderColorConfig: FC<BorderColorConfigProps> = ({
+export const BorderColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
-    app,
-    shapes,
-}) => {
     const setBorderColor = (color: string) => {
         app.style({ stroke: color }, getShapeIds(shapes));
     };

libs/components/board-draw/src/components/command-panel/CommandPanel.tsx

@@ -13,7 +13,7 @@ import { DeleteShapes } from './DeleteOperation';
 import { Lock, Unlock } from './LockOperation';
 import { FrameFillColorConfig } from './FrameFillColorConfig';
 
-export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+export const CommandPanel = ({ app }: { app: TldrawApp }) => {
     const state = app.useStore();
     const bounds = TLDR.get_selected_bounds(state);
     const camera = app.useStore(

libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx

@@ -10,7 +10,7 @@ interface DeleteShapesProps {
     shapes: TDShape[];
 }
 
-export const DeleteShapes: FC<DeleteShapesProps> = ({ app, shapes }) => {
+export const DeleteShapes = ({ app, shapes }: DeleteShapesProps) => {
     const deleteShapes = () => {
         app.delete(getShapeIds(shapes));
     };

libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx

@@ -41,10 +41,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
     return max[0];
 };
 
-export const FillColorConfig: FC<BorderColorConfigProps> = ({
+export const FillColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
-    app,
-    shapes,
-}) => {
     const theme = useTheme();
     const setFillColor = (color: ColorType) => {
         app.style(

libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx

@@ -51,7 +51,7 @@ const _getFontSize = (shapes: TDShape[]): FontSizeStyle => {
     return max[0] as unknown as FontSizeStyle;
 };
 
-export const FontSizeConfig: FC<FontSizeConfigProps> = ({ app, shapes }) => {
+export const FontSizeConfig = ({ app, shapes }: FontSizeConfigProps) => {
     const setFontSize = (size: FontSizeStyle) => {
         app.style({ fontSize: size }, getShapeIds(shapes));
     };

libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx

@@ -40,10 +40,10 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
     return max[0];
 };
 
-export const FrameFillColorConfig: FC<BorderColorConfigProps> = ({
+export const FrameFillColorConfig = ({
     app,
     shapes,
-}) => {
+}: BorderColorConfigProps) => {
     const theme = useTheme();
     const setFillColor = (color: ColorType) => {
         app.style(

libs/components/board-draw/src/components/command-panel/GroupOperation.tsx

@@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
     shapes: TDShape[];
 }
 
-export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Group = ({ app, shapes }: GroupAndUnGroupProps) => {
     const group = () => {
         app.group(getShapeIds(shapes));
     };
@@ -23,7 +23,7 @@ export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
     );
 };
 
-export const UnGroup: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const UnGroup = ({ app, shapes }: GroupAndUnGroupProps) => {
     const ungroup = () => {
         app.ungroup(getShapeIds(shapes));
     };

libs/components/board-draw/src/components/command-panel/LockOperation.tsx

@@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
     shapes: TDShape[];
 }
 
-export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Lock = ({ app, shapes }: GroupAndUnGroupProps) => {
     const lock = () => {
         app.lock(getShapeIds(shapes));
     };
@@ -23,7 +23,7 @@ export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
     );
 };
 
-export const Unlock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
+export const Unlock = ({ app, shapes }: GroupAndUnGroupProps) => {
     const unlock = () => {
         app.unlock(getShapeIds(shapes));
     };

libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx

@@ -44,12 +44,12 @@ interface LineStyleProps {
     onStrokeWidthChange: (width: StrokeWidth) => void;
 }
 
-export const LineStyle: FC<LineStyleProps> = ({
+export const LineStyle = ({
     strokeStyle,
     onStrokeStyleChange,
     strokeWidth,
     onStrokeWidthChange,
-}) => {
+}: LineStyleProps) => {
     return (
         <Container>
             <Title>Stroke Style</Title>

libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx

@@ -24,10 +24,10 @@ interface BorderColorConfigProps {
     shapes: TDShape[];
 }
 
-export const StrokeLineStyleConfig: FC<BorderColorConfigProps> = ({
+export const StrokeLineStyleConfig = ({
     app,
     shapes,
-}) => {
+}: BorderColorConfigProps) => {
     const strokeStyle = _getStrokeStyle(shapes);
     const strokeWidth = _getStrokeWidth(shapes);
     const setStrokeLineStyle = (style: DashStyle) => {

libs/components/board-draw/src/components/context-menu/context-menu.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
 
-export const ContextMenu: FC<{ children: ReactNode }> = ({ children }) => {
+export const ContextMenu = ({ children }: { children: ReactNode }) => {
     return <div>{children}</div>;
 };

libs/components/board-draw/src/components/palette/Palette.tsx

@@ -26,11 +26,11 @@ const formatColors = (colors: ColorValue[]): ColorObject[] => {
     });
 };
 
-export const Palette: FC<PaletteProps> = ({
+export const Palette = ({
     colors: propColors,
     selected,
     onSelect,
-}) => {
+}: PaletteProps) => {
     const colorObjects = useMemo(() => formatColors(propColors), [propColors]);
     return (
         <Container>

libs/components/board-draw/src/components/tools-panel/LineTools.tsx

@@ -33,7 +33,7 @@ const shapes = [
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 
-export const LineTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const LineTools = ({ app }: { app: TldrawApp }) => {
     const activeTool = app.useStore(activeToolSelector);
 
     const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(

libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx

@@ -69,7 +69,7 @@ const shapes = [
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 
-export const ShapeTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const ShapeTools = ({ app }: { app: TldrawApp }) => {
     const activeTool = app.useStore(activeToolSelector);
 
     const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(

libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx

@@ -68,7 +68,7 @@ const tools: Array<{
     },
 ];
 
-export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
+export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
     const activeTool = app.useStore(activeToolSelector);
 
     const isToolLocked = app.useStore(toolLockedSelector);

libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx

@@ -9,13 +9,13 @@ interface PenProps {
     onClick: () => void;
 }
 
-export const Pen: FC<PenProps> = ({
+export const Pen = ({
     name,
     icon,
     primaryColor,
     secondaryColor,
     onClick,
-}) => {
+}: PenProps) => {
     return (
         <Tooltip content={name}>
             <StyledIconButton

libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx

@@ -105,7 +105,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
     return acc;
 }, {} as Record<TDToolType, PencilConfig>);
 
-export const PenTools: FC<{ app: TldrawApp }> = ({ app }) => {
+export const PenTools = ({ app }: { app: TldrawApp }) => {
     const appCurrentTool = app.useStore(state => state.appState.activeTool);
     const chosenPen =
         PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||

libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx

@@ -16,7 +16,7 @@ import { MiniMap } from './mini-map';
 const zoomSelector = (s: TDSnapshot) =>
     s.document.pageStates[s.appState.currentPageId].camera.zoom;
 
-export const ZoomBar: FC = () => {
+export const ZoomBar = () => {
     const app = useTldrawApp();
     const zoom = app.useStore(zoomSelector);
 

libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx

@@ -18,7 +18,7 @@ const getScaleToMap = (width: number, height: number) => {
     return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
 };
 
-export const MiniMap: FC = () => {
+export const MiniMap = () => {
     const app = useTldrawApp();
     const page = app.useStore(s => s.document.pages[s.appState.currentPageId]);
     const pageState = app.useStore(

libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx

@@ -6,13 +6,13 @@ interface SimplifiedShapeProps extends TLBounds {
     onClick?: () => void;
 }
 
-export const SimplifiedShape: FC<SimplifiedShapeProps> = ({
+export const SimplifiedShape = ({
     onClick,
     width,
     height,
     minX,
     minY,
-}) => {
+}: SimplifiedShapeProps) => {
     const style: CSSProperties = {
         width: `${width}px`,
         height: `${height}px`,

libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx

@@ -8,13 +8,13 @@ interface ViewportProps extends TLBounds {
     onPan?: (delta: [number, number]) => void;
 }
 
-export const Viewport: FC<ViewportProps> = ({
+export const Viewport = ({
     onPan,
     width,
     height,
     minX,
     minY,
-}) => {
+}: ViewportProps) => {
     const style: CSSProperties = {
         width: `${width}px`,
         height: `${height}px`,

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -43,7 +43,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
 const BulletLeft = styled('div')(() => ({
     height: '22px',
 }));
-export const BulletView: FC<CreateView> = ({ block, editor }) => {
+export const BulletView = ({ block, editor }: CreateView) => {
     // block.remove();
     const properties = { ...defaultBulletProps, ...block.getProperties() };
     const textRef = useRef<ExtendedTextUtils>(null);

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -126,7 +126,7 @@ const CodeBlock = styled('div')(({ theme }) => ({
         outline: 'none !important',
     },
 }));
-export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
+export const CodeView = ({ block, editor }: CreateCodeView) => {
     const initValue: string = block.getProperty('text')?.value?.[0]?.text;
     const langType: string = block.getProperty('lang');
     const [extensions, setExtensions] = useState<Extension[]>();

libs/components/editor-blocks/src/blocks/divider/divider-view.tsx

@@ -18,7 +18,7 @@ const Line = styled('div')({
     backgroundColor: '#e2e8f0',
 });
 
-export const DividerView: FC<CreateView> = ({ block, editor }) => {
+export const DividerView = ({ block, editor }: CreateView) => {
     const [isSelected, setIsSelected] = useState(false);
 
     useOnSelect(block.id, (isSelect: boolean) => {

libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx

@@ -13,7 +13,7 @@ const MESSAGES = {
 };
 
 type EmbedLinkView = CreateView;
-export const EmbedLinkView: FC<EmbedLinkView> = props => {
+export const EmbedLinkView = (props: EmbedLinkView) => {
     const { block, editor } = props;
     const [isSelect, setIsSelect] = useState(false);
 

libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx

@@ -16,7 +16,7 @@ const MESSAGES = {
 interface FigmaView extends CreateView {
     figmaUrl?: string;
 }
-export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
+export const FigmaView = ({ block, editor }: FigmaView) => {
     const [figmaUrl, setFigmaUrl] = useState<string>(
         block.getProperty('embedLink')?.value
     );

libs/components/editor-blocks/src/blocks/file/FileView.tsx

@@ -48,7 +48,7 @@ const FileViewContainer = styled('div')<{ isSelected: boolean }>(
         };
     }
 );
-export const FileView: FC<FileView> = ({ block, editor }) => {
+export const FileView = ({ block, editor }: FileView) => {
     const [fileUrl, setFileUrl] = useState<string>();
     const fileInfo = block.getProperty('file') || ({} as FileColumnValue);
     const file_id = fileInfo.value;

libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx

@@ -7,7 +7,7 @@ import { GRID_PROPERTY_KEY, removePercent } from '../grid';
 export const GRID_ITEM_CLASS_NAME = 'grid-item';
 export const GRID_ITEM_CONTENT_CLASS_NAME = `${GRID_ITEM_CLASS_NAME}-content`;
 
-export const GridItem: FC<ChildrenView> = function (props) {
+export const GridItem = function (props: ChildrenView) {
     const { children, block, editor } = props;
     const RENDER_DELAY_TIME = 100;
     const ref = useRef<HTMLDivElement>();

libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx

@@ -3,7 +3,7 @@ import { RenderBlock } from '@toeverything/components/editor-core';
 import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
 
 export const GridItemRender = function (creator: FC<ChildrenView>) {
-    const GridItem: FC<CreateView> = function (props) {
+    const GridItem = function (props: CreateView) {
         const { block } = props;
         const children = (
             <>

libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx

@@ -16,7 +16,7 @@ type GridHandleProps = {
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
 };
 
-export const GridHandle: FC<GridHandleProps> = function ({
+export const GridHandle = function ({
     blockId,
     editor,
     enabledAddItem,
@@ -25,7 +25,7 @@ export const GridHandle: FC<GridHandleProps> = function ({
     draggable,
     alertHandleId,
     onMouseEnter,
-}) {
+}: GridHandleProps) {
     const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
     const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = e => {
         if (draggable) {

libs/components/editor-blocks/src/blocks/grid/Grid.tsx

@@ -20,7 +20,7 @@ export function removePercent(str: string) {
     return str.replace('%', '');
 }
 
-export const Grid: FC<CreateView> = function (props) {
+export const Grid = function (props: CreateView) {
     const { block, editor } = props;
     const gridItemMinWidth = editor.configManager.grid.gridItemMinWidth;
     const [isOnDrag, setIsOnDrag] = useState<boolean>(false);

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -78,7 +78,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     })
 );
 
-export const GroupView: FC<CreateView> = props => {
+export const GroupView = (props: CreateView) => {
     const { block, editor } = props;
     const [currentView] = useCurrentView();
     const [groupIsSelect, setGroupIsSelect] = useState(false);

libs/components/editor-blocks/src/blocks/group/ScenePage.tsx

@@ -2,6 +2,6 @@ import { RenderBlockChildren } from '@toeverything/components/editor-core';
 import type { CreateView } from '@toeverything/framework/virgo';
 import { FC } from 'react';
 
-export const ScenePage: FC<CreateView> = ({ block }) => {
+export const ScenePage = ({ block }: CreateView) => {
     return <RenderBlockChildren block={block} />;
 };

libs/components/editor-blocks/src/blocks/group/SceneTable.tsx

@@ -5,7 +5,7 @@ import type { CreateView } from '@toeverything/framework/virgo';
 import type { TableColumn, TableRow } from '../../components/table';
 import { Table, CustomCell } from '../../components/table';
 
-export const SceneTable: FC<CreateView> = ({ block, columns, editor }) => {
+export const SceneTable = ({ block, columns, editor }: CreateView) => {
     const [rows, set_rows] = useState<TableRow[]>([]);
     const data_columns = useMemo<TableColumn[]>(() => {
         return (columns || [])

libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 
-export const GroupDividerView: FC<CreateView> = ({ block, editor }) => {
+export const GroupDividerView = ({ block, editor }: CreateView) => {
     return <></>;
 };

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -54,7 +54,7 @@ const KanbanImageContainer = styled('div')<{ isSelected: boolean }>(
         };
     }
 );
-export const ImageView: FC<ImageView> = ({ block, editor }) => {
+export const ImageView = ({ block, editor }: ImageView) => {
     const workspace = editor.workspace;
     const [imgUrl, set_image_url] = useState<string>();
     const [imgWidth, setImgWidth] = useState<number>(0);

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -40,7 +40,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
     );
 };
 
-export const NumberedView: FC<CreateView> = ({ block, editor }) => {
+export const NumberedView = ({ block, editor }: CreateView) => {
     // block.remove();
     const properties = { ...defaultTodoProps, ...block.getProperties() };
     const [number, set_number] = useState<number>(1);

libs/components/editor-blocks/src/blocks/page/PageView.tsx

@@ -15,7 +15,7 @@ import {
     type ExtendedTextUtils,
 } from '../../components/text-manage';
 
-export const PageView: FC<CreateView> = ({ block, editor }) => {
+export const PageView = ({ block, editor }: CreateView) => {
     const { workspace_id } = useParams();
     const textRef = useRef<ExtendedTextUtils>(null);
     const [backLinks, setBackLinks] =

libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx

@@ -5,7 +5,7 @@ import { CreateView } from '@toeverything/framework/virgo';
 
 type RefLinkView = CreateView;
 
-export const RefLinkView: FC<RefLinkView> = ({ block, editor }) => {
+export const RefLinkView = ({ block, editor }: RefLinkView) => {
     const page_id = useMemo(() => block.getProperty('reference'), [block]);
 
     const [block_content, set_block] =

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -51,11 +51,11 @@ const TextBlock = styled(TextManage)<{ type: string }>(({ theme, type }) => {
     }
 });
 
-export const TextView: FC<CreateTextView> = ({
+export const TextView = ({
     block,
     editor,
     containerClassName,
-}) => {
+}: CreateTextView) => {
     const [isSelect, setIsSelect] = useState<boolean>();
     useOnSelect(block.id, (is_select: boolean) => {
         setIsSelect(is_select);

libs/components/editor-blocks/src/blocks/toc/toc-view.tsx

@@ -11,7 +11,7 @@ const INITIAL_LIST: MenuItem[] = [];
 const MESSAGES = {
     NO_HEADINGS_FOUND: 'No headings found',
 };
-export const TocView: FC<CreateView> = ({ block, editor }) => {
+export const TocView = ({ block, editor }: CreateView) => {
     const [list, setList] = useState(INITIAL_LIST);
     useEffect(() => {
         const sync_toc = async () => {

libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx

@@ -8,20 +8,20 @@ interface CheckBoxProps {
     onChange: (checked: boolean) => void;
 }
 
-export const CheckBox: FC<CheckBoxProps> = ({
+export const CheckBox = ({
-    size = '16px',
+    size = 16,
-    height = '23px',
+    height = 23,
     checked,
     onChange,
-}) => {
+}: CheckBoxProps) => {
     const dynamic_style = useMemo(
         () => ({
             height: {
-                height,
+                height: `${height}px`,
             },
             size: {
-                width: size,
+                width: `${size}px`,
-                height: size,
+                height: `${size}px`,
             },
         }),
         [height, size]

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -33,7 +33,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
     );
 };
 
-export const TodoView: FC<CreateView> = ({ block, editor }) => {
+export const TodoView = ({ block, editor }: CreateView) => {
     const properties = { ...defaultTodoProps, ...block.getProperties() };
     const text_ref = useRef<ExtendedTextUtils>(null);
 

libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx

@@ -10,7 +10,7 @@ const _messages = {
 };
 
 type YoutubeView = CreateView;
-export const YoutubeView: FC<YoutubeView> = ({ block }) => {
+export const YoutubeView = ({ block }: YoutubeView) => {
     const [youtubeUrl, setYoutubeUrl] = useState<string>(
         block.getProperty('embedLink')?.value
     );

libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx

@@ -7,13 +7,13 @@ type BlockContainerProps = Parameters<typeof Container>[0] & {
     editor: BlockEditor;
 };
 
-export const BlockContainer: FC<BlockContainerProps> = function ({
+export const BlockContainer = function ({
     block,
     children,
     className,
     editor,
     ...restProps
-}) {
+}: BlockContainerProps) {
     return (
         <Container
             className={`${className || ''} block_container`}

libs/components/editor-blocks/src/components/ImageView/ImageView.tsx

@@ -33,7 +33,7 @@ const ImageContainer = styled('div')<{ isSelected: boolean }>(
         };
     }
 );
-export const Image: FC<Props> = props => {
+export const Image = (props: Props) => {
     const { link, viewStyle, isSelected, block } = props;
     const on_resize_end = (e: any, data: any) => {
         block.setProperty('image_style', data.size);

libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx

@@ -5,7 +5,7 @@ import { styled } from '@toeverything/components/ui';
 /**
  * Indent rendering child nodes
  */
-export const IndentWrapper: FC<PropsWithChildren> = props => {
+export const IndentWrapper = (props: PropsWithChildren) => {
     return <StyledIdentWrapper>{props.children}</StyledIdentWrapper>;
 };
 

libs/components/editor-blocks/src/components/editable/editable.tsx

@@ -9,7 +9,7 @@ import { ErrorBoundary } from '@toeverything/utils';
 //     onChange: () => void;
 // }
 
-export const Editable: FC = () => {
+export const Editable = () => {
     const editor = useMemo(() => withReact(createEditor()), []);
     return (
         <ErrorBoundary

libs/components/editor-blocks/src/components/source-view/SourceView.tsx

@@ -156,7 +156,7 @@ const LoadingContiner = () => {
     return <Loading>loading...</Loading>;
 };
 
-export const SourceView: FC<Props> = props => {
+export const SourceView = (props: Props) => {
     const { link, isSelected, block, editorElement } = props;
     const src = formatUrl(link);
     // let iframeShow = useLazyIframe(src, 3000, iframeContainer);

libs/components/editor-blocks/src/components/table/basic-table.tsx

@@ -64,8 +64,13 @@ export const DEFAULT_RENDER_CELL: CustomCell = ({ value }) => {
     return <span>{value ? String(value) : '--'}</span>;
 };
 
-const Cell: FC<GridChildComponentProps<TableData>> = memo(
+const Cell = memo(
-    ({ data, rowIndex, columnIndex, style }) => {
+    ({
+        data,
+        rowIndex,
+        columnIndex,
+        style,
+    }: GridChildComponentProps<TableData>) => {
         const column = data.columns[columnIndex];
         const row = data.rows[rowIndex];
         const is_first_column = columnIndex === 0;
@@ -89,18 +94,17 @@ const Cell: FC<GridChildComponentProps<TableData>> = memo(
                 />
             </div>
         );
-    },
+    }
-    areEqual
 );
 
-export const BasicTable: FC<BasicTableProps> = ({
+export const BasicTable = ({
     columns,
     rows,
     headerHeight = DEFAULT_ROW_HEIGHT,
     rowKey,
     border = true,
     renderCell = DEFAULT_RENDER_CELL,
-}) => {
+}: BasicTableProps) => {
     const container_ref = useRef<HTMLDivElement>();
     const [table_width, set_table_width] = useState(0);
 

libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx

@@ -6,10 +6,10 @@ import type { CellProps } from '../types';
 /**
  * @deprecated
  */
-export const CheckBoxCell: FC<CellProps<BooleanColumnValue>> = ({
+export const CheckBoxCell = ({
     value,
     onChange,
-}) => {
+}: CellProps<BooleanColumnValue>) => {
     return (
         <Checkbox
             checked={value?.value}

libs/components/editor-blocks/src/components/table/custom-cell/index.tsx

@@ -9,7 +9,7 @@ import type { CellProps } from './types';
 /**
  * @deprecated
  */
-const DefaultCell: FC<CellProps> = ({ onChange, ...props }) => {
+const DefaultCell = ({ onChange, ...props }: CellProps) => {
     return <DEFAULT_RENDER_CELL {...props} />;
 };
 
@@ -33,7 +33,7 @@ interface CustomCellProps extends TableCustomCellProps<unknown> {
     onChange: (data: TableCustomCellProps<unknown>) => void;
 }
 
-export const CustomCell: FC<CustomCellProps> = props => {
+export const CustomCell = (props: CustomCellProps) => {
     const View =
         props.rowIndex === 0
             ? DefaultCell

libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx

@@ -8,11 +8,11 @@ import type { CellProps } from '../types';
 /**
  * @deprecated
  */
-export const SelectCell: FC<CellProps<EnumColumnValue>> = ({
+export const SelectCell = ({
     value,
     column,
     onChange,
-}) => {
+}: CellProps<EnumColumnValue>) => {
     const options = useMemo(() => {
         if (isEnumColumn(column.columnConfig)) {
             return column.columnConfig.options.map(option => {

libs/components/editor-blocks/src/components/table/table.tsx

@@ -6,7 +6,7 @@ interface TableProps extends BasicTableProps {
     addon?: ReactNode;
 }
 
-export const Table: FC<TableProps> = ({ addon, ...props }) => {
+export const Table = ({ addon, ...props }: TableProps) => {
     return (
         <div>
             {addon}

libs/components/editor-blocks/src/components/upload/upload.tsx

@@ -71,7 +71,7 @@ const UploadBox = styled('div')<{ isSelected: boolean }>(
 );
 
 const button_styles: SxProps = { width: '60%', fontSize: '12px' };
-export const Upload: FC<Props> = props => {
+export const Upload = (props: Props) => {
     const {
         fileChange,
         size,

libs/components/editor-core/src/RenderRoot.tsx

@@ -24,11 +24,11 @@ interface RenderRootProps {
 const MAX_PAGE_WIDTH = 5000;
 export const MIN_PAGE_WIDTH = 1480;
 
-export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
+export const RenderRoot = ({
     editor,
     editorElement,
     children,
-}) => {
+}: PropsWithChildren<RenderRootProps>) => {
     const selectionRef = useRef<SelectionRef>(null);
     const triggeredBySelect = useRef(false);
     const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -12,10 +12,10 @@ interface BlockTagProps {
     block: AsyncBlock;
 }
 
-export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
+export const BlockPendantProvider = ({
     block,
     children,
-}) => {
+}: PropsWithChildren<BlockTagProps>) => {
     const triggerRef = useRef<HTMLDivElement>();
     const { getProperties } = useRecastBlockMeta();
     const properties = getProperties();

libs/components/editor-core/src/block-pendant/PendantTag.tsx

@@ -1,9 +1,4 @@
-import React, {
+import React from 'react';
-    FC,
-    FunctionComponent,
-    PropsWithChildren,
-    CSSProperties,
-} from 'react';
 import { Tag, type TagProps } from '@toeverything/components/ui';
 import {
     DateValue,

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -1,12 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import {
+import { message, Option, Select } from '@toeverything/components/ui';
-    Input,
-    message,
-    Option,
-    Select,
-    Tooltip,
-} from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
 import { AsyncBlock } from '../../editor';
 
 import { IconMap, pendantOptions } from '../config';
@@ -14,7 +7,6 @@ import { PendantOptions } from '../types';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import {
     StyledDivider,
-    StyledInputEndAdornment,
     StyledOperationLabel,
     StyledOperationTitle,
     StyledPopoverSubTitle,
@@ -26,6 +18,7 @@ import {
     getPendantConfigByType,
     checkPendantForm,
 } from '../utils';
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnCreateSure } from './hooks';
 
 export const CreatePendantPanel = ({
@@ -74,19 +67,11 @@ export const CreatePendantPanel = ({
                 })}
             </Select>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
-            <Input
+            <FieldTitleInput
                 value={fieldName}
-                placeholder="Input your field name here"
                 onChange={e => {
                     setFieldName(e.target.value);
                 }}
-                endAdornment={
-                    <Tooltip content="Help info here" placement="top">
-                        <StyledInputEndAdornment>
-                            <HelpCenterIcon />
-                        </StyledInputEndAdornment>
-                    </Tooltip>
-                }
             />
             {selectedOption ? (
                 <>

libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input, Tooltip, InputProps } from '@toeverything/components/ui';
+import { StyledInputEndAdornment } from '../StyledComponent';
+import { HelpCenterIcon } from '@toeverything/components/icons';
+
+export const FieldTitleInput = (props: InputProps) => {
+    return (
+        <Input
+            placeholder="Input your field name here"
+            endAdornment={
+                <Tooltip
+                    offset={[15, -5]}
+                    content="Name your tag of the current series"
+                    placement="top"
+                >
+                    <StyledInputEndAdornment>
+                        <HelpCenterIcon />
+                    </StyledInputEndAdornment>
+                </Tooltip>
+            }
+            {...props}
+        />
+    );
+};

libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input, message, Tooltip } from '@toeverything/components/ui';
+import { message } from '@toeverything/components/ui';
-import { HelpCenterIcon } from '@toeverything/components/icons';
 import { PendantModifyPanel } from '../pendant-modify-panel';
 import type { AsyncBlock } from '../../editor';
 import {
@@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils';
 import {
     StyledPopoverWrapper,
     StyledOperationLabel,
-    StyledInputEndAdornment,
     StyledDivider,
     StyledPopoverContent,
     StyledPopoverSubTitle,
 } from '../StyledComponent';
 import { IconMap, pendantOptions } from '../config';
-
+import { FieldTitleInput } from './FieldTitleInput';
 import { useOnUpdateSure } from './hooks';
 
 type Props = {
@@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({
             </StyledPopoverContent>
             <StyledOperationLabel>Field Title</StyledOperationLabel>
             {titleEditable ? (
-                <Input
+                <FieldTitleInput
                     value={fieldName}
-                    placeholder="Input your field name here"
                     onChange={e => {
                         setFieldName(e.target.value);
                     }}
-                    endAdornment={
-                        <Tooltip content="Help info here" placement="top">
-                            <StyledInputEndAdornment>
-                                <HelpCenterIcon />
-                            </StyledInputEndAdornment>
-                        </Tooltip>
-                    }
                 />
             ) : (
                 <StyledPopoverContent>{property.name}</StyledPopoverContent>

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -8,11 +8,11 @@ import {
 } from '@toeverything/components/ui';
 import { AddPendantPopover } from '../AddPendantPopover';
 
-export const PendantPopover: FC<
+export const PendantPopover = (
-    {
+    props: {
         block: AsyncBlock;
     } & Omit<PopperProps, 'content'>
-> = props => {
+) => {
     const { block, ...popoverProps } = props;
     const popoverHandlerRef = useRef<PopperHandler>();
     return (

libs/components/editor-core/src/render-block/RenderBlock.tsx

@@ -10,10 +10,10 @@ interface RenderBlockProps {
     hasContainer?: boolean;
 }
 
-export const RenderBlock: FC<RenderBlockProps> = ({
+export const RenderBlock = ({
     blockId,
     hasContainer = true,
-}) => {
+}: RenderBlockProps) => {
     const { editor, editorElement } = useEditor();
     const { block } = useBlock(blockId);
     const blockRef = useRef<HTMLDivElement>(null);

libs/components/editor-core/src/render-block/RenderBlockChildren.tsx

@@ -6,7 +6,7 @@ interface RenderChildrenProps {
     block: AsyncBlock;
 }
 
-export const RenderBlockChildren: FC<RenderChildrenProps> = ({ block }) => {
+export const RenderBlockChildren = ({ block }: RenderChildrenProps) => {
     return block.childrenIds.length ? (
         <>
             {block.childrenIds.map(childId => {

libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx

@@ -128,7 +128,7 @@ function DragComponent(props: {
     );
 }
 
-export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
+export const LeftMenuDraggable = (props: LeftMenuProps) => {
     const { editor, blockInfo, defaultVisible, lineInfo } = props;
     const [visible, setVisible] = useState(defaultVisible);
     const [anchorEl, setAnchorEl] = useState<Element>();

libs/components/icons/src/auto-icons/add-view/add-view.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AddViewIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AddViewIcon: FC<AddViewIconProps> = ({ color, style, ...props}) => {
+export const AddViewIcon = ({ color, style, ...props}: AddViewIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/add/add.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AddIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AddIcon: FC<AddIconProps> = ({ color, style, ...props}) => {
+export const AddIcon = ({ color, style, ...props}: AddIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/align-center/align-center.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignCenterIcon: FC<AlignCenterIconProps> = ({ color, style, ...props}) => {
+export const AlignCenterIcon = ({ color, style, ...props}: AlignCenterIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/align-justify/align-justify.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignJustifyIcon: FC<AlignJustifyIconProps> = ({ color, style, ...props}) => {
+export const AlignJustifyIcon = ({ color, style, ...props}: AlignJustifyIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/align-left/align-left.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignLeftIcon: FC<AlignLeftIconProps> = ({ color, style, ...props}) => {
+export const AlignLeftIcon = ({ color, style, ...props}: AlignLeftIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/align-right/align-right.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AlignRightIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignRightIcon: FC<AlignRightIconProps> = ({ color, style, ...props}) => {
+export const AlignRightIcon = ({ color, style, ...props}: AlignRightIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/arrow-big/arrow-big.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface ArrowBigIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const ArrowBigIcon: FC<ArrowBigIconProps> = ({ color, style, ...props}) => {
+export const ArrowBigIcon = ({ color, style, ...props}: ArrowBigIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/arrow-drop-down/arrow-drop-down.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface ArrowDropDownIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const ArrowDropDownIcon: FC<ArrowDropDownIconProps> = ({ color, style, ...props}) => {
+export const ArrowDropDownIcon = ({ color, style, ...props}: ArrowDropDownIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/arrow-right/arrow-right.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface ArrowRightIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const ArrowRightIcon: FC<ArrowRightIconProps> = ({ color, style, ...props}) => {
+export const ArrowRightIcon = ({ color, style, ...props}: ArrowRightIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/arrow/arrow.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface ArrowIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const ArrowIcon: FC<ArrowIconProps> = ({ color, style, ...props}) => {
+export const ArrowIcon = ({ color, style, ...props}: ArrowIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/at/at.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface AtIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AtIcon: FC<AtIconProps> = ({ color, style, ...props}) => {
+export const AtIcon = ({ color, style, ...props}: AtIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/backlinks/backlinks.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BacklinksIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BacklinksIcon: FC<BacklinksIconProps> = ({ color, style, ...props}) => {
+export const BacklinksIcon = ({ color, style, ...props}: BacklinksIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/backward-undo/backward-undo.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BackwardUndoIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BackwardUndoIcon: FC<BackwardUndoIconProps> = ({ color, style, ...props}) => {
+export const BackwardUndoIcon = ({ color, style, ...props}: BackwardUndoIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/blocks/blocks.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BlocksIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BlocksIcon: FC<BlocksIconProps> = ({ color, style, ...props}) => {
+export const BlocksIcon = ({ color, style, ...props}: BlocksIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/board-view/board-view.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BoardViewIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BoardViewIcon: FC<BoardViewIconProps> = ({ color, style, ...props}) => {
+export const BoardViewIcon = ({ color, style, ...props}: BoardViewIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/border-color-duotone/border-color-duotone.tsx

@@ -1,16 +1,13 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BorderColorDuotoneIconProps extends Omit<SvgIconProps, 'color'> {
     color0?: string
     primaryColor?: string
 }
 
-export const BorderColorDuotoneIcon: FC<BorderColorDuotoneIconProps> = ({ color0, primaryColor, style, ...props}) => {
+export const BorderColorDuotoneIcon = ({ color0, primaryColor, style, ...props}: BorderColorDuotoneIconProps) => {
     const propsStyles = {"--color-0": color0 || primaryColor};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/border-color-none/border-color-none.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BorderColorNoneIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BorderColorNoneIcon: FC<BorderColorNoneIconProps> = ({ color, style, ...props}) => {
+export const BorderColorNoneIcon = ({ color, style, ...props}: BorderColorNoneIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/brush/brush.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BrushIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BrushIcon: FC<BrushIconProps> = ({ color, style, ...props}) => {
+export const BrushIcon = ({ color, style, ...props}: BrushIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/bullet/bullet.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BulletIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BulletIcon: FC<BulletIconProps> = ({ color, style, ...props}) => {
+export const BulletIcon = ({ color, style, ...props}: BulletIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/bulleted-list-1/bulleted-list-1.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BulletedList_1IconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BulletedList_1Icon: FC<BulletedList_1IconProps> = ({ color, style, ...props}) => {
+export const BulletedList_1Icon = ({ color, style, ...props}: BulletedList_1IconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/bulleted-list-2/bulleted-list-2.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BulletedList_2IconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BulletedList_2Icon: FC<BulletedList_2IconProps> = ({ color, style, ...props}) => {
+export const BulletedList_2Icon = ({ color, style, ...props}: BulletedList_2IconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/bulleted-list-3/bulleted-list-3.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BulletedList_3IconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BulletedList_3Icon: FC<BulletedList_3IconProps> = ({ color, style, ...props}) => {
+export const BulletedList_3Icon = ({ color, style, ...props}: BulletedList_3IconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/bulleted-list-4/bulleted-list-4.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface BulletedList_4IconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const BulletedList_4Icon: FC<BulletedList_4IconProps> = ({ color, style, ...props}) => {
+export const BulletedList_4Icon = ({ color, style, ...props}: BulletedList_4IconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/callout/callout.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CalloutIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CalloutIcon: FC<CalloutIconProps> = ({ color, style, ...props}) => {
+export const CalloutIcon = ({ color, style, ...props}: CalloutIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/card/card.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CardIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CardIcon: FC<CardIconProps> = ({ color, style, ...props}) => {
+export const CardIcon = ({ color, style, ...props}: CardIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/check-box-check/check-box-check.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CheckBoxCheckIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CheckBoxCheckIcon: FC<CheckBoxCheckIconProps> = ({ color, style, ...props}) => {
+export const CheckBoxCheckIcon = ({ color, style, ...props}: CheckBoxCheckIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/check-box-uncheck/check-box-uncheck.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CheckBoxUncheckIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CheckBoxUncheckIcon: FC<CheckBoxUncheckIconProps> = ({ color, style, ...props}) => {
+export const CheckBoxUncheckIcon = ({ color, style, ...props}: CheckBoxUncheckIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/code-block/code-block.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CodeBlockIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CodeBlockIcon: FC<CodeBlockIconProps> = ({ color, style, ...props}) => {
+export const CodeBlockIcon = ({ color, style, ...props}: CodeBlockIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/code/code.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CodeIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CodeIcon: FC<CodeIconProps> = ({ color, style, ...props}) => {
+export const CodeIcon = ({ color, style, ...props}: CodeIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/collaborator/collaborator.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CollaboratorIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CollaboratorIcon: FC<CollaboratorIconProps> = ({ color, style, ...props}) => {
+export const CollaboratorIcon = ({ color, style, ...props}: CollaboratorIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/comment/comment.tsx

@@ -1,15 +1,12 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface CommentIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const CommentIcon: FC<CommentIconProps> = ({ color, style, ...props}) => {
+export const CommentIcon = ({ color, style, ...props}: CommentIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4.8 18.2V15H3.2v4.9a.9.9 0 0 0 .9.9H9v-1.6H6.063L19.2 6.063V9h1.6Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4 19l1.131 1.131L19.2 6.063V9h1.6Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/conector-arrow/conector-arrow.tsx

@@ -1,21 +1,18 @@
 
-import { FC } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
-// eslint-disable-next-line no-restricted-imports
-import type { SvgIconProps } from '@mui/material';
 
 export interface ConectorArrowIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const ConectorArrowIcon: FC<ConectorArrowIconProps> = ({ color, style, ...props}) => {
+export const ConectorArrowIcon = ({ color, style, ...props}: ConectorArrowIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}
     return (
         <SvgIcon style={styles} {...props}>
-        <path fillRule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4.8 18.2V15H3.2v4.9a.9.9 0 0 0 .9.9H9v-1.6H6.063L19.2 6.063V9h1.6Z" clipRule="evenodd" />
+        <path fillRule="evenodd" d="M20.8 9V4.1a.9.9 0 0 0-.9-.9H15v1.6h3.2L4 19l1.131 1.131L19.2 6.063V9h1.6Z" clipRule="evenodd" />
         </SvgIcon>
     )
 };