@arcblock/ux 1.17.21 → 2.0.2

package/src/Header/responsive-header.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import MenuIcon from '@material-ui/icons/Menu';
-import Button from '@material-ui/core/IconButton';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Drawer from '@material-ui/core/Drawer';
+import MenuIcon from '@mui/icons-material/Menu';
+import Button from '@mui/material/IconButton';
+import useTheme from '@mui/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Drawer from '@mui/material/Drawer';
 import Header from './header';
 
 /**
@@ -17,7 +17,7 @@ import Header from './header';
  */
 function ResponsiveHeader({ menu, prepend, children, ...rest }) {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = useState(false);
   const _children =
     typeof children === 'function'
@@ -81,7 +81,7 @@ const Root = styled(Header)`
   .header-menu {
     display: none;
   }
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${props => props.$theme.breakpoints.down('md')} {
     .header-menu {
       display: block;
     }

package/src/Icon/index.js

@@ -10,6 +10,7 @@ const variants = {
   solid: 'fas',
 };
 
+// eslint-disable-next-line react/prop-types
 const Icon = ({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) => {
   const content = (
     <i

package/src/Img/index.js

@@ -1,12 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { makeStyles, SvgIcon } from '@material-ui/core';
+import { SvgIcon } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import Alert from 'mdi-material-ui/Alert';
 import ImageIcon from 'mdi-material-ui/Image';
 
-const useStyles = makeStyles(() => ({
-  root: {
+const PREFIX = 'Img';
+
+const classes = {
+  root: `${PREFIX}-root`,
+};
+
+const Root = styled('div')(() => ({
+  [`& .${classes.root}`]: {
     position: 'relative',
     overflow: 'hidden',
     '& .image--state, & .image--img': {
@@ -56,7 +63,6 @@ function Img({
   onSuccess,
   ...rest
 }) {
-  const classes = useStyles();
   const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
 
   const [imgState, setImgState] = useState('init');
@@ -117,7 +123,7 @@ function Img({
 
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    <div ref={ref} style={outerStyle} {...rest}>
+    <Root ref={ref} style={outerStyle} {...rest}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
@@ -131,7 +137,7 @@ function Img({
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
       </div>
-    </div>
+    </Root>
   );
 }
 

package/src/InfoRow/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 const InfoRow = ({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) => (
   <Container layout={layout} width={nameWidth} {...rest}>

package/src/Layout/dashboard/header.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '@material-ui/core/IconButton';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import Hidden from '@material-ui/core/Hidden';
-import MenuIcon from '@material-ui/icons/Menu';
+import Button from '@mui/material/IconButton';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Hidden from '@mui/material/Hidden';
+import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
 
 import Logo from '../../Logo';
 
 const StyledAppBar = styled(AppBar)`
   && {
-    z-index: ${props => props.theme.zIndex.drawer + 1};
+    z-index: ${props => props.theme.zIndex.drawer};
     background: ${props => props.theme.palette.background.default};
     box-shadow: none;
     top: 0;
@@ -71,7 +71,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     .header-title {
       display: none;
     }
@@ -116,7 +116,7 @@ export default function Header({
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <Hidden smDown>
+          <Hidden mdDown>
             <div className="header-logo">{logo || <Logo showText={false} />}</div>
           </Hidden>
           <div className="header-title">

package/src/Layout/dashboard/index.js

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
-import Container from '@material-ui/core/Container';
-import Box from '@material-ui/core/Box';
-import Drawer from '@material-ui/core/Drawer';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
 import useWindowSize from 'react-use/lib/useWindowSize';
 
 import Sidebar from './sidebar';

package/src/Layout/dashboard/sidebar.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withTheme from '@material-ui/core/styles/withTheme';
+import withTheme from '@mui/styles/withTheme';
 
 import { withRouter, Link } from 'react-router-dom';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import teal from '@material-ui/core/colors/teal';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { teal } from '@mui/material/colors';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
@@ -77,7 +77,7 @@ const MenuItems = React.memo(styled.div`
     text-align: center;
     font-size: 0;
   }
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     && .sidebar-logo {
       display: block;
     }
@@ -88,7 +88,10 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 
 const MenuItem = styled(Button)`
   && {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
     background: ${props => (props.selected ? gradient : '')};
@@ -109,13 +112,7 @@ const MenuItem = styled(Button)`
       text-transform: capitalize;
       letter-spacing: normal;
       width: 80%;
-    }
-
-    .MuiButton-label {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
+      color: ${props => props.theme.palette.text.primary};
     }
   }
 `;

package/src/Layout/index.js

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Helmet from 'react-helmet';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
 
-import AppBar from '@material-ui/core/AppBar';
-import Container from '@material-ui/core/Container';
-import Drawer from '@material-ui/core/Drawer';
-import Divider from '@material-ui/core/Divider';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import AppBar from '@mui/material/AppBar';
+import Container from '@mui/material/Container';
+import Drawer from '@mui/material/Drawer';
+import Divider from '@mui/material/Divider';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 
 import Footer from '../Footer';
 import OpenInWallet from '../Wallet/Open';
@@ -63,7 +63,7 @@ export default function Layout({
       <Divider />
       <List>
         {links.map(x => (
-          <Link className="nav-link" key={x.url} href={x.url}>
+          <Link className="nav-link" key={x.url} href={x.url} underline="hover">
             <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
               <ListItemText>
                 {x.icon && (
@@ -99,7 +99,8 @@ export default function Layout({
                 aria-label="open drawer"
                 edge="start"
                 onClick={onToggleDrawer}
-                className="menu-button">
+                className="menu-button"
+                size="large">
                 <MenuIcon />
               </IconButton>
               {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
@@ -130,7 +131,8 @@ export default function Layout({
                     key={x.url}
                     href={x.url}
                     className={`nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`}
-                    color={x.color}>
+                    color={x.color}
+                    underline="hover">
                     {x.icon && (
                       <Icon
                         name={x.icon}
@@ -278,7 +280,7 @@ const Div = styled.div`
     }
   }
 
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     .toolbar {
       .nav-links,
       .menu-logo,

package/src/Locale/selector.js

@@ -1,16 +1,18 @@
+/* eslint-disable react/jsx-no-bind */
 import React, { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { useTheme } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import CheckIcon from '@material-ui/icons/Check';
+import { useTheme } from '@mui/styles';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Box from '@mui/material/Box';
+import CheckIcon from '@mui/icons-material/Check';
 
 import { getColor, getBackground } from '../Util';
 
@@ -44,14 +46,16 @@ function LocaleSelector(props) {
   return (
     <Div component="div" dark={dark} theme={theme} {...rest}>
       <ButtonComponent ref={anchorEl} className="trigger" onClick={() => setOpen(!open)}>
-        <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
-        {showText ? (
-          <Typography component="strong" className="trigger-text">
-            {languages.find(x => x.value === locale).text}
-          </Typography>
-        ) : (
-          ''
-        )}
+        <Box display="flex" alignItems="center">
+          <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
+          {showText ? (
+            <Typography component="strong" className="trigger-text">
+              {languages.find(x => x.value === locale).text}
+            </Typography>
+          ) : (
+            ''
+          )}
+        </Box>
       </ButtonComponent>
       <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
@@ -105,6 +109,7 @@ const Div = styled.div`
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
+      color: ${props => getColor(props)};
     }
   }
 

package/src/NFTDisplay/broken.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import BrokenImage from '@material-ui/icons/BrokenImage';
+import BrokenImage from '@mui/icons-material/BrokenImage';
 
 export default function Broken() {
   return <Root className="nft-display__broken" />;

package/src/NavMenu/nav-menu.js

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { HorizontalStyle, InlineStyle } from './style';
 
 const NavMenuContext = createContext();

package/src/PageScroller/index.js

@@ -220,8 +220,10 @@ const PageScroller = ({
     pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
     pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
     return () => {
-      pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
-      pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      if (pageContainer.current?.removeEventListener) {
+        pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+        pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      }
     };
   }, [touchMove, keyPress]);
 

package/src/PricingTable/PricingPlan.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Card from '@material-ui/core/Card';
-import Button from '@material-ui/core/Button';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 
 const PricingPlan = ({ plan }) => (
   <PlanCard shadow>

package/src/PricingTable/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
 
@@ -9,7 +9,7 @@ const PricingTable = ({ plans }) => {
   if (plans && plans.length > 0) {
     return (
       <Div variant="even">
-        <Grid container spacing={2} justify="center">
+        <Grid container spacing={2} justifyContent="center">
           {plans.map(x => (
             <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
               <PricingPlan plan={x} />

package/src/Result/common.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
 import React from 'react';
-import useTheme from '@material-ui/core/styles/useTheme';
-import InfoIcon from '@material-ui/icons/Info';
-import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
+import useTheme from '@mui/styles/useTheme';
+import InfoIcon from '@mui/icons-material/Info';
+import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
 import Result from './result';
 import translations from './translations';
 import { useLocaleContext } from '../Locale/context';

package/src/Result/index.js

@@ -26,11 +26,9 @@ const ResultWrapper = ({ status, ...rest }) => {
 ResultWrapper.propTypes = {
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   ...Result.propTypes,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };
 ResultWrapper.defaultProps = {
   status: '',
-  title: '',
 };
 
 export default ResultWrapper;

package/src/Result/result.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 
 const Result = ({ icon, title, description, extra, ...rest }) => {
   return (
@@ -30,13 +30,14 @@ const Result = ({ icon, title, description, extra, ...rest }) => {
 
 Result.propTypes = {
   icon: PropTypes.element,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   actions: PropTypes.any,
   extra: PropTypes.element,
 };
 Result.defaultProps = {
   icon: undefined,
+  title: '',
   description: '',
   actions: null,
   extra: undefined,

package/src/Spinner/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 /**
  * Spinner
  *
- * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @material-ui/core/CircularProgress 的实现
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现
  *
  * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
  * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖

package/src/SplitButton/index.js

@@ -1,13 +1,13 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import Popper from '@material-ui/core/Popper';
-import Paper from '@material-ui/core/Paper';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '../Button';
 
 export default function SplitButton({
@@ -72,7 +72,7 @@ export default function SplitButton({
 
 SplitButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
   menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
   // 也可以是用于渲染主按钮的 function
   children: PropTypes.any,

package/src/Switch/index.js

@@ -1,78 +1,74 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiSwitch from '@material-ui/core/Switch';
+import { styled } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiSwitch from '@mui/material/Switch';
 
-// 参考: https://v4.mui.com/components/switches/
-const IOSSwitch = withStyles(theme => ({
-  root: {
-    width: 42,
-    height: 26,
+// 参考: https://mui.com/material-ui/react-switch/#customization
+const IOSSwitch = styled(props => (
+  <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+))(({ theme }) => ({
+  width: 42,
+  height: 26,
+  padding: 0,
+  '& .MuiSwitch-switchBase': {
     padding: 0,
-    margin: theme.spacing(1),
-  },
-  switchBase: {
-    padding: 1,
-    '&$checked': {
+    margin: 2,
+    transitionDuration: '300ms',
+    '&.Mui-checked': {
       transform: 'translateX(16px)',
-      color: theme.palette.common.white,
-      '& + $track': {
-        backgroundColor: '#52d869',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
         opacity: 1,
-        border: 'none',
+        border: 0,
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5,
       },
     },
-    '&$focusVisible $thumb': {
-      color: '#52d869',
+    '&.Mui-focusVisible .MuiSwitch-thumb': {
+      color: '#33cf4d',
       border: '6px solid #fff',
     },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
   },
-  thumb: {
-    width: 24,
-    height: 24,
-  },
-  track: {
-    // fix: 下边框截断问题
+  '& .MuiSwitch-thumb': {
     boxSizing: 'border-box',
+    width: 22,
+    height: 22,
+  },
+  '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    border: `1px solid ${theme.palette.grey[400]}`,
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border']),
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500,
+    }),
   },
-  checked: {},
-  focusVisible: {},
-}))(({ classes, ...props }) => {
-  return (
-    <MuiSwitch
-      focusVisibleClassName={classes.focusVisible}
-      disableRipple
-      classes={{
-        root: classes.root,
-        switchBase: classes.switchBase,
-        thumb: classes.thumb,
-        track: classes.track,
-        checked: classes.checked,
-      }}
-      {...props}
-    />
-  );
-});
+}));
 
 /**
  * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
  * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
  */
 function Switch({ labelProps, ...rest }) {
-  return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
+  if (labelProps) {
+    return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
+  }
+  return <IOSSwitch {...rest} />;
 }
 
 Switch.propTypes = {
   labelProps: PropTypes.object,
 };
 Switch.defaultProps = {
-  labelProps: {},
+  labelProps: null,
 };
 
 export default Switch;