@arcblock/ux 2.10.24 → 2.10.26

package/lib/Util/constant.d.ts

@@ -0,0 +1,33 @@
+export const DEFAULT_TIMEOUT: number;
+export const DEFAULT_WINDOW_TIMEOUT: number;
+export const WELLKNOWN_SERVICE_PATH_PREFIX: "/.well-known/service";
+export const AUTH_SERVICE_PREFIX: "/.well-known/service";
+export const SESSION_TOKEN_STORAGE_KEY: "login_token";
+export const REFRESH_TOKEN_STORAGE_KEY: "refresh_token";
+export const RELAY_SOCKET_PREFIX: "/.well-known/service";
+export const API_DID_PREFIX: "/api/did";
+export const DASHBOARD_URL: "/.well-known/service/admin";
+export const PROFILE_URL: "/.well-known/service/user";
+export const NAVIGATION_URL: "/.well-known/service/admin/navigation";
+export const DID_PREFIX: "did:abt:";
+export namespace PASSPORT_STATUS {
+    let VALID: string;
+    let REVOKED: string;
+}
+export namespace LOGIN_PROVIDER {
+    let AUTH0: string;
+    let APPLE: string;
+    let GITHUB: string;
+    let GOOGLE: string;
+    let WALLET: string;
+    let NFT: string;
+}
+export const LOGIN_PROVIDER_NAME: {
+    [x: string]: string;
+};
+export namespace OAUTH_PROVIDER {
+    let auth0: string;
+    let apple: string;
+    let github: string;
+    let google: string;
+}

package/lib/Util/deprecate.d.ts

@@ -0,0 +1,5 @@
+export function warn(name: any, alternative: any): void;
+export function withDeprecated(Component: any, { name, alternative }: {
+    name: any;
+    alternative: any;
+}): (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/lib/Util/deprecate.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 const warn = (name, alternative) => {
   if (process.env.NODE_ENV === 'production') {
     return;

package/lib/Util/index.d.ts

@@ -0,0 +1,81 @@
+export function parseQuery(str: any): any;
+export function stringifyQuery(params?: {}): string;
+/**
+ * @param {number} opts.expireInDays
+ * @param {string} opts.path
+ * @param {domain} opts.domain
+ * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
+ */
+export function getCookieOptions(expireInDays?: number): {
+    expires: number;
+    path: any;
+    domain: any;
+    sameSite: any;
+    secure: boolean;
+};
+export function mergeProps(props: any, component: any, jsonAttrs?: any[]): any;
+export function getCopyright(startYear?: number): string;
+/**
+ * Set the date tool library which support for format() and locale() functions,
+ *  moment and dayjs are recommended.
+ * @param {object} the date tool library
+ */
+export function setDateTool(tool: any): void;
+export function getDateTool(): any;
+/**
+ * Format the time string as `ll` format: MMM D, YYYY
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formatted date string
+ */
+export function formatToDate(date: string, { locale, tz }?: {
+    locale: string;
+    tz: string;
+}): any;
+/**
+ * Format the time string as `lll` format: MMM D, YYYY h:mm A
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formatted date string
+ */
+export function formatToDatetime(date: string, { locale, tz }?: {
+    locale: string;
+    tz: string;
+}): any;
+export function detectWalletExtension(): any;
+export function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures }: {
+    webWalletUrl: any;
+    action?: string;
+    locale?: string;
+    url: any;
+    windowFeatures: any;
+}): void;
+export function getColor(props: any): any;
+export function getBackground(props: any): any;
+export function getTimezone(): string;
+export function str2color(str: any): string;
+export function formatUptime(uptime: any): string;
+export function getFontSize(size: any): string;
+export function isEthereumDid(did: any): boolean;
+export function appendParams(url: string, params: {
+    imageFilter: "crop" | "resize";
+    w?: number;
+    h?: number;
+    r?: 0 | 90 | 180 | 270;
+}): string;
+export function getUserAvatar(avatar: any, size?: number): any;
+export function sleep(time?: number): Promise<any>;
+export function isUrl(str: any): boolean;
+export function getVisitorId(): string;
+export function setVisitorId(value: any): void;
+export function getDIDColor(did: any): any;
+export function getTranslation(translations: any | string, locale: string, { fallbackLocale, defaultValue }?: {
+    fallbackLocale?: string;
+    defaultValue?: string;
+}): string;

package/lib/Video/index.js

@@ -1,10 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
 import CircularProgress from '@mui/material/CircularProgress';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   string,
   number,

package/lib/Wallet/Action.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import logo from './images/abtwallet.png';
@@ -5,7 +6,6 @@ import { mergeProps } from '../Util';
 import colors from '../Colors';
 import Button from '../Button';
 import { styled } from '../Theme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WalletAction(props) {
   const newProps = mergeProps(props, WalletAction, ['style']);
   const {

package/lib/Wallet/Download.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
@@ -205,7 +206,6 @@ AndroidDownloadIcon.defaultProps = {
 import Button from '../Button';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WalletDownload(props) {
   const browser = useBrowser();
   const newProps = mergeProps(props, WalletDownload, ['style']);

package/lib/Wallet/Open.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
 export default function OpenInWallet({
   locale,
   link

package/lib/WalletOSIcon/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import ApiIcon from '@iconify-icons/mdi/api';
@@ -8,7 +9,6 @@ import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-ma
 // import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
 import { LOGIN_PROVIDER } from '../Util/constant';
-import { jsx as _jsx } from "react/jsx-runtime";
 export default function WalletOSIcon({
   loading,
   walletOS,

package/lib/WebWalletSWKeeper/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
@@ -7,7 +8,6 @@ import { detectWalletExtension } from '@arcblock/ux/lib/Util';
 import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
 
 // 默认最大空闲时间: 30min
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30;
 // 可使用 localStorage.setItem('wallet_sw_keeper_disabled', 1) 来禁用嵌入 wallet iframe
 const STORAGE_KEY_DISABLED = 'wallet_sw_keeper_disabled';

package/lib/WechatPrompt/index.js

@@ -1,10 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import IosImage from './images/ios.png';
 import AndroidImage from './images/android.png';
 import { styled } from '../Theme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WechatPrompt() {
   const browser = useBrowser();
   if (!browser.mobile.any) {

package/lib/withTheme/index.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme, ThemeProvider } from '../Theme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function withTheme(Component, {
   mode = 'light',
   pageWidth = 'md',

package/lib/withTracker/error_boundary.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable import/no-unresolved */
 import { Component } from 'react';
 import * as Sentry from '@sentry/browser';
 import Alert from '../Alert';
-import { jsx as _jsx } from "react/jsx-runtime";
 export default class ErrorBoundary extends Component {
   constructor(props) {
     super(props);

package/lib/withTracker/index.js

@@ -1,10 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable import/no-unresolved */
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
 import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
 import ErrorBoundary from './error_boundary';
-import { jsx as _jsx } from "react/jsx-runtime";
 export default ((WrappedComponent, options = {}) => {
   const {
     appVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.24",
+  "version": "2.10.26",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -19,7 +19,10 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "babel --config-file ./babel.config.es.js src --out-dir lib --copy-files --no-copy-ignored",
+    "build": "npm run build:clean && npm run build:lib && npm run build:types",
+    "build:clean": "rm -rf lib",
+    "build:lib": "babel --config-file ./babel.config.es.js src --out-dir lib --copy-files --no-copy-ignored",
+    "build:types": "tsc",
     "watch": "babel --config-file ./babel.config.es.js src --out-dir lib -w --copy-files --no-copy-ignored",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
@@ -39,12 +42,14 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@types/react": "^18.3.4",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.5.0",
-    "moment-timezone": "^0.5.37"
+    "moment-timezone": "^0.5.37",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -54,12 +59,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "c443aa19b7b47cc26623e770fd297efbb5d1611a",
+  "gitHead": "196e6adde06c3c62b95faecf931e2120e366a2fe",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.24",
-    "@arcblock/nft-display": "^2.10.24",
-    "@arcblock/react-hooks": "^2.10.24",
+    "@arcblock/icons": "^2.10.26",
+    "@arcblock/nft-display": "^2.10.26",
+    "@arcblock/react-hooks": "^2.10.26",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -69,6 +74,7 @@
     "@iconify/react": "^4.1.1",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
+    "@types/mui-datatables": "^4.3.12",
     "ahooks": "^3.7.10",
     "axios": "^1.7.2",
     "base64-url": "^2.3.3",

package/src/Button/wrap.js

@@ -19,12 +19,13 @@ const extendedColors = {
 };
 
 /**
+ * @typedef {import('@mui/material').ButtonProps} MuiButtonProps
  * @typedef {{
  *  rounded?: boolean,
  *  loading?: boolean,
  *  forwardedRef?: import('react').ForwardedRef<any>,
- *  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'danger' | 'warning' | 'reverse' | 'did'
- * } & import('@mui/material').ButtonProps} ButtonProps
+ *  color?: MuiButtonProps['color'] | 'reverse' | 'did'
+ * } & Omit<MuiButtonProps, 'color'>} ButtonProps
  */
 
 /**

package/src/Datatable/index.jsx

@@ -17,6 +17,7 @@ import { styled } from '../Theme';
  * @typedef {{
  *  icon: import('react').ReactElement,
  *  title: string,
+ *  onClick?: () => void
  * }} DataTableCustomButton
  */
 
@@ -38,6 +39,12 @@ import { styled } from '../Theme';
  * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
  */
 
+/**
+ * @typedef {Object} ModifiedMUIDataTableProps
+ * @property {string} [title] - The title of the table (optional).
+ * @property {...import('mui-datatables').MUIDataTableProps} [rest] - Other props from MUIDataTableProps.
+ */
+
 /**
  * @typedef {{
  *  data: Array<object | number[] | string[]>,
@@ -53,10 +60,10 @@ import { styled } from '../Theme';
  *  verticalKeyWidth?: number | string,
  *  hideTableHeader?: boolean,
  *  components?: import('react').ReactElement,
- *  emptyNode?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactNode,
  *  durable?: string,
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
- * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ * } & ModifiedMUIDataTableProps} DataTableProps
  */
 
 const FilterLine = styled('div')`

package/src/Dialog/confirm.jsx

@@ -5,17 +5,22 @@ import Button from '../Button';
 import Dialog from './dialog';
 
 /**
-  @typedef {Object} ConfirmProps
-  @property {boolean} open
-  @property {React.ReactNode} title
-  @property {React.ReactNode} children
-  @property {() => void | Promise<void>} onConfirm
-  @property {() => void | Promise<void>} onCancel
-  @property {boolean} [showCancelButton=true]
-  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
-  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
-  @property {import('@mui/material').PaperProps} [PaperProps={}]
-*/
+ * @typedef {import('../Button/wrap').ButtonProps} ButtonProps
+ * @typedef {import('@mui/material').PaperProps} PaperProps
+ * @typedef {{
+ *   title: React.ReactNode,
+ *   open: boolean,
+ *   children: React.ReactNode,
+ *   onConfirm: () => void | Promise<void>,
+ *   onCancel: () => void | Promise<void>,
+ *   showCancelButton?: boolean,
+ *   showCloseButton?: boolean,
+ *   fullScreen?: boolean,
+ *   confirmButton?: {text: string, props?: ButtonProps}
+ *   cancelButton?: {text: string, props?: ButtonProps}
+ *   PaperProps?: PaperProps
+ * }} ConfirmProps
+ */
 
 // 注意排在 {...rest} 之后的 props 优先级更高
 /**
@@ -30,6 +35,7 @@ export default function Confirm({
   onCancel,
   showCloseButton,
   showCancelButton,
+  fullScreen,
   confirmButton,
   cancelButton,
   PaperProps,
@@ -58,6 +64,7 @@ export default function Confirm({
       {...rest}
       onClose={handleClose}
       showCloseButton={showCloseButton}
+      fullScreen={fullScreen}
       slotProps={{
         header: {
           sx: {
@@ -105,11 +112,13 @@ export default function Confirm({
 
 Confirm.propTypes = {
   title: PropTypes.node.isRequired,
+  open: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   showCancelButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,
+  fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
   confirmButton: PropTypes.shape({
     text: PropTypes.string.isRequired,
@@ -123,8 +132,9 @@ Confirm.propTypes = {
 };
 
 Confirm.defaultProps = {
-  showCloseButton: true,
   showCancelButton: true,
+  showCloseButton: true,
+  fullScreen: false,
   confirmButton: {
     text: 'Confirm',
   },

package/src/Dialog/dialog.jsx

@@ -13,14 +13,15 @@ import {
 import { styled, useTheme } from '../Theme';
 
 /**
-  @typedef {import('@mui/material').PaperProps & {
-    minWidth: number | string,
-    minHeight: number | string,
-  }} PaperStyle
-*/
+ * @typedef {import('@mui/material').DialogProps} MuiDialogProps
+ * @typedef {import('@mui/material').PaperProps & {
+ *   minWidth?: number | string,
+ *   minHeight?: number | string,
+ * }} PaperStyle
+ */
 
 /**
-  @typedef {Object} DialogProps
+  @typedef  {Object} UxDialogProps
   @property {React.ReactNode} children - The content of the dialog.
   @property {React.ReactNode} [title] - The title of the dialog.
   @property {React.ReactNode} [prepend] - Content to be displayed before the dialog title.
@@ -32,6 +33,10 @@ import { styled, useTheme } from '../Theme';
   @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
+/**
+ * @typedef {MuiDialogProps & UxDialogProps} DialogProps
+ */
+
 /**
  * Dialog
  *

package/src/SplitButton/index.js

@@ -13,13 +13,12 @@ import noop from 'lodash/noop';
 import { styled } from '../Theme';
 
 /**
+ * @typedef {import('@mui/material').MenuItem} MenuItem
+ * @typedef {import('@mui/material').MenuItemProps} MenuItemProps
  * SplitButton 组件 Props
  * @typedef {{
- *  size?: 'small' | 'medium' | 'large';
- *  color?: 'primary' | 'secondary' | 'inherit';
- *  menu?: Array<import('@mui/material').MenuItem> | import('@mui/material').MenuItem;
+ *  menu?: React.ReactElement<MenuItemProps, MenuItem>[] | React.ReactElement<MenuItemProps, MenuItem>;
  *  children?: JSX.Element | (() => JSX.Element);
- *  variant?: 'outlined' | 'contained';
  *  onClick?: () => void;
  *  menuButtonProps?: import('@mui/material').ButtonProps;
  * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
@@ -84,8 +83,8 @@ export default function SplitButton(props) {
 }
 
 SplitButton.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
+  size: PropTypes.string,
+  color: PropTypes.string,
   menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
   // 也可以是用于渲染主按钮的 function
   children: PropTypes.node,
@@ -103,8 +102,9 @@ SplitButton.defaultProps = {
   onClick: noop,
   menuButtonProps: {},
 };
+
 /**
- * @type {import('@mui/material').MenuItem}
+ * @type {MenuItem}
  */
 SplitButton.Item = MenuItem;
 

package/src/Tag/index.js

@@ -30,13 +30,15 @@ const types = {
 };
 
 /**
+ * @typedef {import('@mui/material/Typography').TypographyProps} TypographyProps
  * @typedef {{
- *  type: 'error' | 'warning' | 'success' | 'primary' | 'reverse',
- *  content: string,
- *  className: string;
+ *  type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse',
+ *  content?: string,
+ *  className?: string;
  *  children: import('react').ReactNode,
- *  style: import('react').CSSProperties
- * }} TagProps
+ *  style?: import('react').CSSProperties
+ * }} TagOwnProps
+ * @typedef { TypographyProps & TagOwnProps} TagProps
  */
 
 /**
@@ -81,7 +83,9 @@ Tag.defaultProps = {
   style: {},
 };
 
-/** @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps> & React.RefAttributes<HTMLSpanElement>>} */
+/**
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps> & React.RefAttributes<HTMLSpanElement>>}
+ */
 const TagComponent = forwardRef((props, ref) => <Tag {...props} forwardedRef={ref} />);
 export default TagComponent;
 

package/src/Theme/index.js

@@ -6,6 +6,14 @@ export { useTheme };
 
 const isTransientProp = (prop) => prop.startsWith('$');
 
+/**
+ * @typedef {import('@mui/material/styles').Theme} Theme
+ * @typedef {import('@mui/material/styles').CreateMUIStyled<Theme>} Styled
+ */
+
+/**
+ * @type {Styled}
+ */
 export const styled = (component, options = {}) => {
   return muiStyled(component, {
     ...options,

package/src/Theme/theme.js

@@ -12,11 +12,28 @@ import '@fontsource/inter/latin-ext-700.css';
 
 import colors from '../Colors';
 
+/**
+ * @typedef {import('@mui/material/styles').Theme} Theme
+ * @typedef {import('@mui/material/styles').TypographyVariantsOptions} TypographyVariantsOptions
+ * @typedef {import('@mui/material/styles').Components} Components
+ */
+
 const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
-// eslint-disable-next-line import/prefer-default-export
-export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides, ...rest } = {}) => {
+/**
+ * @description
+ * @export
+ * @param {{
+ *  mode?: string,
+ *  pageWidth?: string,
+ *  palette?: import('@mui/material/styles').PaletteOptions,
+ *  typography?: TypographyVariantsOptions,
+ *  overrides?: Components<Omit<Theme, 'components'>>,
+ * }} options
+ * @return {Theme}
+ */
+export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides = {}, ...rest } = {}) => {
   // palette 考虑 light & dark mode, dark mode 需要持续完善
   // - 能配合 ColorModeContext 使用
   // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
@@ -78,7 +95,7 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           fontWeight: 700,
         },
       },
-      typography || {}
+      typography
     ),
     components: {
       MuiButton: {