refactor(component): migrate design components (#5000)

```[tasklist]
### Tasks
- [x] Migrate components from [design](https://github.com/toeverything/design)
- [x] Replace all imports from `@toeverything/components`
- [x] Clean up `@toeverything/components` dependencies
- [x] Storybook
```

### Influence

Here are all the components that are influenced by `@toeverything/components`

- `@affine/component`
    - App update `Button` `Tooltip`
    - App sidebar header `IconButton`, `Tooltip`
    - Back `Button`
    - Auth
      - Change email page save `Button`
      - Change password page all `Button`s (Save, Later, Open)
      - Confirm change email `Button`
      - Set password page `Button`
      - Sign in success page `Button`
      - Sign up page `Button`
      - Auth `Modal`
    - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton`
    - Share
      - Disable shared public link `Modal`
    - Import page `IconButton`, `Tooltip`
    - Accept invite page `Avatar`, `Button`
    - Invite member `Modal`
    - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip`
    - Notification center `IconButton`
    - Page list
      - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip`
      - tags more `Menu`
      - favorite `IconButton`, `Tooltip`
      - new page dropdown `Menu`
      - filter `Menu`, `Button`, `IconButton`
    - Page operation `Menu`
      - export `MenuItem`
      - move to trash `MenuItem`, `ConfirmModal`
    - Workspace header filter `Menu`, `Button`
    - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*)
    - Collection operation `Menu`, `MenuItem`
      - Create collection `Modal`, `Button`
      - Edit collection `Modal`, `Button`
      - Page mode filter `Menu`
      - Page mode `Button`, `Menu`
    - Setting modal
      - storage usage progress `Button`, `Tooltip`
    - On boarding tour `Modal`
- `@affine/core`
  - Bookmark `Menu`
  - Affine error boundary `Button`
  - After sign in send email `Button`
  - After sign up send email `Button`
  - Send email `Button`
  - Sign in `Button`
  - Subscription redirect `Loading`, `Button`
  - Setting `Modal`
    - User plan button `Tooltip`
    - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu`
    - Profile `Button`, `Avatar`
    - Workspace
      - publish panel `Button`, `Tooltip`
      - export panel `Button`
      - storage panel `Button`, `Tooltip`
      - delete `ConfirmModal`
    - Language `Menu`
    - Account setting `Avatar`, `Button`
    - Date format setting `Menu`
    - Billing `Button`, `IconButton`, `Loading`
    - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip`
  - Create workspace `Modal`, `ConfirmModal`, `Button`
  - Payment disabled `ConfirmModal`
  - Share/Export `Menu`, `Button`, `Divider`
  - Sign out `ConfirmModal`
  - Temp disable affine cloud `Modal`
  - Page detail operation `Menu`
  - Blocksuite mode switch `Tooltip`
  - Login card `Avatar`
  - Help island `Tooltip`
- `plugin`
  - copilot
  - hello world
  - image preview
  - outline

packages/frontend/component/src/ui/divider/divider.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
+
+import * as styles from './style.css';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerProps = PropsWithChildren &
+  Omit<HTMLAttributes<HTMLDivElement>, 'type'> & {
+    orientation?: DividerOrientation;
+    size?: 'thinner' | 'default';
+    dividerColor?: string;
+  };
+
+const defaultProps = {
+  orientation: 'horizontal',
+  size: 'default',
+};
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  (props, ref) => {
+    const { orientation, className, size, dividerColor, style, ...otherProps } =
+      {
+        ...defaultProps,
+        ...props,
+      };
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          styles.divider,
+          {
+            [styles.verticalDivider]: orientation === 'vertical',
+            [styles.thinner]:
+              size === 'thinner' && orientation === 'horizontal',
+            [styles.verticalThinner]:
+              size === 'thinner' && orientation === 'vertical',
+          },
+          className
+        )}
+        style={{
+          backgroundColor: dividerColor ? dividerColor : undefined,
+          ...style,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';
+export default Divider;

packages/frontend/component/src/ui/divider/index.ts

@@ -0,0 +1 @@
+export * from './divider';

packages/frontend/component/src/ui/divider/style.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+
+export const divider = style({
+  height: '1px',
+  backgroundColor: 'var(--affine-border-color)',
+  borderRadius: '8px',
+  margin: '8px 0',
+  width: '100%',
+});
+export const thinner = style({
+  height: '0.5px',
+});
+export const verticalDivider = style({
+  width: '1px',
+  borderRadius: '8px',
+  height: '100%',
+  margin: '0 2px',
+});
+export const verticalThinner = style({
+  width: '0.5px',
+});