diff --git a/.env b/.env
index 30dbae3055..63e14bc841 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,5 @@
# use for download icon from figma
+
FIGMA_TOKEN
NODE_ENV
AFFINE_FEATURE_FLAG_TOKEN
diff --git a/libs/components/board-draw/src/components/align-panel/index.tsx b/libs/components/board-draw/src/components/align-panel/index.tsx
new file mode 100644
index 0000000000..d0b8092c2c
--- /dev/null
+++ b/libs/components/board-draw/src/components/align-panel/index.tsx
@@ -0,0 +1,65 @@
+import { styled, Tooltip } from '@toeverything/components/ui';
+import { AlignType } from '../command-panel/AlignOperation';
+
+interface AlignObject {
+ name?: string;
+ /**
+ * color: none means no color
+ */
+ title: string;
+ icon?: JSX.Element;
+}
+/**
+ * ColorValue : none means no color
+ */
+interface AlignProps {
+ alignOptions: AlignObject[];
+ selected?: string;
+ onSelect?: (alginType: AlignType) => void;
+}
+
+export const AlignPanel = ({
+ alignOptions,
+ selected,
+ onSelect,
+}: AlignProps) => {
+ return (
+
+ {alignOptions.map(alignOption => {
+ const option = alignOption.name as AlignType;
+ // const selected = color;
+ return (
+
+ {
+ onSelect?.(option);
+ }}
+ >
+ {alignOption.icon}
+
+
+ );
+ })}
+
+ );
+};
+
+const Container = styled('div')({
+ width: '170px',
+ display: 'flex',
+ flexWrap: 'wrap',
+});
+
+const SelectableContainer = styled('div')<{ selected?: boolean }>(
+ ({ selected, theme }) => ({
+ width: '22px',
+ height: '22px',
+ color: theme.affine.palette.icons,
+ borderRadius: '5px',
+ overflow: 'hidden',
+ margin: '10px',
+ padding: '1px',
+ cursor: 'pointer',
+ boxSizing: 'border-box',
+ })
+);
diff --git a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
new file mode 100644
index 0000000000..d3a8670fce
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
@@ -0,0 +1,111 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { StretchType, TDShape } from '@toeverything/components/board-types';
+import {
+ AlignHorizontalCenterIcon,
+ AlignIcon,
+ AlignToBottomIcon,
+ AlignToLeftIcon,
+ AlignToRightIcon,
+ AlignToTopIcon,
+ AlignVerticalCenterIcon,
+ DistributeHorizontalIcon,
+ DistributeVerticalIcon,
+} from '@toeverything/components/icons';
+import {
+ IconButton,
+ Popover,
+ Tooltip,
+ useTheme,
+} from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+interface BorderColorConfigProps {
+ app: TldrawApp;
+ shapes: TDShape[];
+}
+
+export enum AlignType {
+ Top = 'top',
+ CenterVertical = 'centerVertical',
+ Bottom = 'bottom',
+ Left = 'left',
+ CenterHorizontal = 'centerHorizontal',
+ Right = 'right',
+}
+
+let AlignPanelArr = [
+ {
+ name: 'top',
+ title: 'Align top',
+ icon: ,
+ },
+ {
+ name: 'centerVertical',
+ title: 'Align Center Vertical',
+ icon: ,
+ },
+ {
+ name: 'bottom',
+ title: 'Align bottom',
+ icon: ,
+ },
+ {
+ name: 'left',
+ title: 'Align left',
+ icon: ,
+ },
+ {
+ name: 'right',
+ title: 'Align right',
+ icon: ,
+ },
+ {
+ name: 'centerHorizontal',
+ title: 'Align centerHorizontal',
+ icon: ,
+ },
+ {
+ name: 'stretchCenterHorizontal',
+ title: 'Align stretch centerHorizontal',
+ icon: ,
+ },
+ {
+ name: 'stretchCenterVertical',
+ title: 'Align stretch centerHorizontal',
+ icon: ,
+ },
+];
+export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
+ const theme = useTheme();
+ const setAlign = (alginType: string) => {
+ switch (alginType) {
+ case 'stretchCenterHorizontal':
+ app.stretch(StretchType.Horizontal);
+ break;
+ case 'stretchCenterVertical':
+ app.stretch(StretchType.Vertical);
+ break;
+ default:
+ app.align(alginType as AlignType);
+ break;
+ }
+ };
+
+ return (
+
+ }
+ >
+
+
+
+
+
+
+ );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index 395b6ddf47..c07bfa88b4 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -1,6 +1,7 @@
import { TLDR, TldrawApp } from '@toeverything/components/board-state';
import { Divider, Popover, styled } from '@toeverything/components/ui';
import { Fragment } from 'react';
+import { AlignOperation } from './AlignOperation';
import { BorderColorConfig } from './BorderColorConfig';
import { DeleteShapes } from './DeleteOperation';
import { FillColorConfig } from './FillColorConfig';
@@ -8,6 +9,7 @@ import { FontSizeConfig } from './FontSizeConfig';
import { FrameFillColorConfig } from './FrameFillColorConfig';
import { Group, UnGroup } from './GroupOperation';
import { Lock, Unlock } from './LockOperation';
+import { MoveCoverageConfig } from './MoveCoverage';
import { StrokeLineStyleConfig } from './stroke-line-style-config';
import { getAnchor, useConfig } from './utils';
@@ -91,6 +93,19 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
shapes={config.deleteShapes.selectedShapes}
/>
),
+ moveCoverageConfig: (
+
+ ),
+ alginOperation: config.group.selectedShapes.length ? (
+
+ ) : null,
};
const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);
diff --git a/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
new file mode 100644
index 0000000000..cbca4224fa
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx
@@ -0,0 +1,77 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+ BringForwardIcon,
+ BringToFrontIcon,
+ LayersIcon,
+ SendBackwardIcon,
+ SendToBackIcon,
+} from '@toeverything/components/icons';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+
+interface FontSizeConfigProps {
+ app: TldrawApp;
+ shapes: TDShape[];
+}
+
+const AlignPanelArr = [
+ {
+ title: 'To Front',
+ name: 'tofront',
+ icon: ,
+ },
+ {
+ title: 'Forward',
+ name: 'forward',
+ icon: ,
+ },
+ {
+ title: 'Backward',
+ name: 'backward',
+ icon: ,
+ },
+ {
+ title: 'To Back',
+ name: 'toback',
+ icon: ,
+ },
+];
+
+export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
+ const moveCoverage = (type: string) => {
+ switch (type) {
+ case 'toback':
+ app.moveToBack();
+ break;
+ case 'backward':
+ app.moveBackward();
+ break;
+ case 'forward':
+ app.moveForward();
+ break;
+ case 'tofront':
+ app.moveToFront();
+ break;
+ }
+ };
+
+ return (
+
+ }
+ >
+
+
+
+
+
+
+ );
+};
diff --git a/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg
new file mode 100644
index 0000000000..946c34d529
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx
new file mode 100644
index 0000000000..adc4e0fc3a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-horizontal-center/align-horizontal-center.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignHorizontalCenterIconProps extends Omit {
+ color?: string
+}
+
+export const AlignHorizontalCenterIcon = ({ color, style, ...props}: AlignHorizontalCenterIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg
new file mode 100644
index 0000000000..2518cc3925
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx
new file mode 100644
index 0000000000..25d8363a5c
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-bottom/align-to-bottom.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToBottomIconProps extends Omit {
+ color?: string
+}
+
+export const AlignToBottomIcon = ({ color, style, ...props}: AlignToBottomIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg
new file mode 100644
index 0000000000..81c33baf33
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx
new file mode 100644
index 0000000000..102015be99
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-left/align-to-left.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToLeftIconProps extends Omit {
+ color?: string
+}
+
+export const AlignToLeftIcon = ({ color, style, ...props}: AlignToLeftIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg
new file mode 100644
index 0000000000..ed84addfab
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx
new file mode 100644
index 0000000000..b5f586d900
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-right/align-to-right.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToRightIconProps extends Omit {
+ color?: string
+}
+
+export const AlignToRightIcon = ({ color, style, ...props}: AlignToRightIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg
new file mode 100644
index 0000000000..e688501fbf
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx
new file mode 100644
index 0000000000..5587e0df47
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-to-top/align-to-top.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToTopIconProps extends Omit {
+ color?: string
+}
+
+export const AlignToTopIcon = ({ color, style, ...props}: AlignToTopIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg
new file mode 100644
index 0000000000..a58d6ed611
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx
new file mode 100644
index 0000000000..4d9c28d120
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align-vertical-center/align-vertical-center.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignVerticalCenterIconProps extends Omit {
+ color?: string
+}
+
+export const AlignVerticalCenterIcon = ({ color, style, ...props}: AlignVerticalCenterIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/align/align.svg b/libs/components/icons/src/auto-icons/align/align.svg
new file mode 100644
index 0000000000..7925bf7844
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align/align.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/align/align.tsx b/libs/components/icons/src/auto-icons/align/align.tsx
new file mode 100644
index 0000000000..61997d17f6
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/align/align.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignIconProps extends Omit {
+ color?: string
+}
+
+export const AlignIcon = ({ color, style, ...props}: AlignIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg
new file mode 100644
index 0000000000..638f6aa740
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx
new file mode 100644
index 0000000000..067253a85e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringForwardIconProps extends Omit {
+ color?: string
+}
+
+export const BringForwardIcon = ({ color, style, ...props}: BringForwardIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg
new file mode 100644
index 0000000000..7158fe6f56
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx
new file mode 100644
index 0000000000..9424307345
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringToFrontIconProps extends Omit {
+ color?: string
+}
+
+export const BringToFrontIcon = ({ color, style, ...props}: BringToFrontIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg
new file mode 100644
index 0000000000..78934c6d1a
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx
new file mode 100644
index 0000000000..0871851c6e
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-horizontal/distribute-horizontal.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeHorizontalIconProps extends Omit {
+ color?: string
+}
+
+export const DistributeHorizontalIcon = ({ color, style, ...props}: DistributeHorizontalIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg
new file mode 100644
index 0000000000..b3189fda48
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx
new file mode 100644
index 0000000000..bbaaea88f3
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/distribute-vertical/distribute-vertical.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeVerticalIconProps extends Omit {
+ color?: string
+}
+
+export const DistributeVerticalIcon = ({ color, style, ...props}: DistributeVerticalIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/index.ts b/libs/components/icons/src/auto-icons/index.ts
index 8ea2f6c0a0..d8a932e463 100644
--- a/libs/components/icons/src/auto-icons/index.ts
+++ b/libs/components/icons/src/auto-icons/index.ts
@@ -1,4 +1,4 @@
-export const timestamp = 1660270988401;
+export const timestamp = 1660740866491;
export * from './image/image';
export * from './format-clear/format-clear';
export * from './backward-undo/backward-undo';
@@ -129,4 +129,18 @@ export * from './unlock/unlock';
export * from './more-tags-an-subblocks/more-tags-an-subblocks';
export * from './page-in-page-tree/page-in-page-tree';
export * from './pin/pin';
-export * from './add/add';
\ No newline at end of file
+export * from './add/add';
+export * from './align-to-left/align-to-left';
+export * from './align-to-right/align-to-right';
+export * from './distribute-horizontal/distribute-horizontal';
+export * from './distribute-vertical/distribute-vertical';
+export * from './align-to-top/align-to-top';
+export * from './align-to-bottom/align-to-bottom';
+export * from './align-horizontal-center/align-horizontal-center';
+export * from './align-vertical-center/align-vertical-center';
+export * from './bring-forward/bring-forward';
+export * from './send-backward/send-backward';
+export * from './bring-to-front/bring-to-front';
+export * from './send-to-back/send-to-back';
+export * from './align/align';
+export * from './layers/layers';
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/layers/layers.svg b/libs/components/icons/src/auto-icons/layers/layers.svg
new file mode 100644
index 0000000000..9859478a12
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layers/layers.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/layers/layers.tsx b/libs/components/icons/src/auto-icons/layers/layers.tsx
new file mode 100644
index 0000000000..be23ad2287
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/layers/layers.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface LayersIconProps extends Omit {
+ color?: string
+}
+
+export const LayersIcon = ({ color, style, ...props}: LayersIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/send-backward/send-backward.svg b/libs/components/icons/src/auto-icons/send-backward/send-backward.svg
new file mode 100644
index 0000000000..75d31da632
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-backward/send-backward.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx b/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx
new file mode 100644
index 0000000000..41cd3ac134
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-backward/send-backward.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendBackwardIconProps extends Omit {
+ color?: string
+}
+
+export const SendBackwardIcon = ({ color, style, ...props}: SendBackwardIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};
diff --git a/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg
new file mode 100644
index 0000000000..a114dfdd62
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx
new file mode 100644
index 0000000000..479a092f28
--- /dev/null
+++ b/libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendToBackIconProps extends Omit {
+ color?: string
+}
+
+export const SendToBackIcon = ({ color, style, ...props}: SendToBackIconProps) => {
+ const propsStyles = {"color": color};
+ const customStyles = {};
+ const styles = {...propsStyles, ...customStyles, ...style}
+ return (
+
+
+
+ )
+};