@surveycake/rc 3.0.0-alpha.2 → 3.0.0-alpha.23

package/dist/rc.cjs.development.js

@@ -4,19 +4,69 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var CssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
+var MUICssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
+var styles$5 = require('@material-ui/core/styles');
+var polished = require('polished');
 var React = require('react');
 var React__default = _interopDefault(React);
-var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
-var emotion = require('emotion');
-var styles$5 = require('@material-ui/core/styles');
 var emotionTheming = require('emotion-theming');
+var MUIBackdrop = _interopDefault(require('@material-ui/core/Backdrop'));
+var Box$1 = _interopDefault(require('@material-ui/core/Box'));
 var MUIButton = _interopDefault(require('@material-ui/core/Button'));
-var Typography$2 = _interopDefault(require('@material-ui/core/Typography'));
-var MUILink = _interopDefault(require('@material-ui/core/Link'));
+var MUIButtonGroup = _interopDefault(require('@material-ui/core/ButtonGroup'));
+var MUICircularProgress = _interopDefault(require('@material-ui/core/CircularProgress'));
+var MUIDialog = _interopDefault(require('@material-ui/core/Dialog'));
+var MUIDialogActions = _interopDefault(require('@material-ui/core/DialogActions'));
+var MUIDialogContent = _interopDefault(require('@material-ui/core/DialogContent'));
+var MUIDialogContentText = _interopDefault(require('@material-ui/core/DialogContentText'));
+var MUIDialogTitle = _interopDefault(require('@material-ui/core/DialogTitle'));
+var Fade$1 = _interopDefault(require('@material-ui/core/Fade'));
+var MUIFormControl = _interopDefault(require('@material-ui/core/FormControl'));
+var MUIFormControlLabel = _interopDefault(require('@material-ui/core/FormControlLabel'));
+var MUIFormGroup = _interopDefault(require('@material-ui/core/FormGroup'));
+var MUIFormHelperText = _interopDefault(require('@material-ui/core/FormHelperText'));
+var MUIFormLabel = _interopDefault(require('@material-ui/core/FormLabel'));
+var emotion = require('emotion');
+var MuiSelect$1 = _interopDefault(require('@material-ui/core/Select'));
+var AddCircleOutline = _interopDefault(require('@material-ui/icons/AddCircleOutline'));
+var ArrowDropDown = _interopDefault(require('@material-ui/icons/ArrowDropDown'));
 var Cancel = _interopDefault(require('@material-ui/icons/Cancel'));
-var Info = _interopDefault(require('@material-ui/icons/Info'));
 var CheckCircle$2 = _interopDefault(require('@material-ui/icons/CheckCircle'));
+var Close = _interopDefault(require('@material-ui/icons/Close'));
+var Delete = _interopDefault(require('@material-ui/icons/Delete'));
+var Edit = _interopDefault(require('@material-ui/icons/Edit'));
+var FormatBold = _interopDefault(require('@material-ui/icons/FormatBold'));
+var FormatColorFill = _interopDefault(require('@material-ui/icons/FormatColorFill'));
+var FormatItalic = _interopDefault(require('@material-ui/icons/FormatItalic'));
+var FormatUnderlined = _interopDefault(require('@material-ui/icons/FormatUnderlined'));
+var Help = _interopDefault(require('@material-ui/icons/Help'));
+var HelpOutline = _interopDefault(require('@material-ui/icons/HelpOutline'));
+var Info = _interopDefault(require('@material-ui/icons/Info'));
+var KeyboardArrowDown = _interopDefault(require('@material-ui/icons/KeyboardArrowDown'));
+var Link$3 = _interopDefault(require('@material-ui/icons/Link'));
+var MoreHoriz = _interopDefault(require('@material-ui/icons/MoreHoriz'));
+var NavigateNext = _interopDefault(require('@material-ui/icons/NavigateNext'));
+var OpenInNew = _interopDefault(require('@material-ui/icons/OpenInNew'));
+var ReportProblemRounded = _interopDefault(require('@material-ui/icons/ReportProblemRounded'));
+var Schedule = _interopDefault(require('@material-ui/icons/Schedule'));
+var Settings = _interopDefault(require('@material-ui/icons/Settings'));
+var SettingsOutlined = _interopDefault(require('@material-ui/icons/SettingsOutlined'));
+var WatchLater = _interopDefault(require('@material-ui/icons/WatchLater'));
+var WebAsset = _interopDefault(require('@material-ui/icons/WebAsset'));
+var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
+var MuiListSubheader$1 = _interopDefault(require('@material-ui/core/ListSubheader'));
+var MuiMenuItem$1 = _interopDefault(require('@material-ui/core/MenuItem'));
+var Typography$2 = _interopDefault(require('@material-ui/core/Typography'));
+var MUIIconButton = _interopDefault(require('@material-ui/core/IconButton'));
+var MUILink = _interopDefault(require('@material-ui/core/Link'));
+var MUIOutlinedInput = _interopDefault(require('@material-ui/core/OutlinedInput'));
+var MUISwitch = _interopDefault(require('@material-ui/core/Switch'));
+var MUITab = _interopDefault(require('@material-ui/core/Tab'));
+var MUITabs = _interopDefault(require('@material-ui/core/Tabs'));
+var MUITextField = _interopDefault(require('@material-ui/core/TextField'));
+var MUIToggleButton = _interopDefault(require('@material-ui/lab/ToggleButton'));
+var MUIToggleButtonGroup = _interopDefault(require('@material-ui/lab/ToggleButtonGroup'));
+var MUITooltip = _interopDefault(require('@material-ui/core/Tooltip'));
 var MuiAvatar = _interopDefault(require('@material-ui/core/Avatar'));
 var Chip$1 = _interopDefault(require('@material-ui/core/Chip'));
 var colorManipulator = require('@material-ui/core/styles/colorManipulator');
@@ -28,22 +78,10 @@ var MuiCardContent = _interopDefault(require('@material-ui/core/CardContent'));
 var MuiCardHeader = _interopDefault(require('@material-ui/core/CardHeader'));
 var pickers = require('@material-ui/pickers');
 var styled = _interopDefault(require('@emotion/styled'));
-var core = require('@emotion/core');
-var MuiTooltip = _interopDefault(require('@material-ui/core/Tooltip'));
-var MuiSelect = _interopDefault(require('@material-ui/core/Select'));
-var MuiMenuItem = _interopDefault(require('@material-ui/core/MenuItem'));
-var MuiListSubheader = _interopDefault(require('@material-ui/core/ListSubheader'));
+var core$1 = require('@emotion/core');
 var Popper$1 = _interopDefault(require('@material-ui/core/Popper'));
 var ClickAwayListener = _interopDefault(require('@material-ui/core/ClickAwayListener'));
 var MuiMenuList = _interopDefault(require('@material-ui/core/MenuList'));
-var Fade = _interopDefault(require('@material-ui/core/Fade'));
-var MuiToggleButton = _interopDefault(require('@material-ui/lab/ToggleButton'));
-var MuiToggleButtonGroup = _interopDefault(require('@material-ui/lab/ToggleButtonGroup'));
-var TextField = _interopDefault(require('@material-ui/core/TextField'));
-var Box = _interopDefault(require('@material-ui/core/Box'));
-var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
-var MuiTabs = _interopDefault(require('@material-ui/core/Tabs'));
-var MuiTab = _interopDefault(require('@material-ui/core/Tab'));
 var RadioGroup = _interopDefault(require('@material-ui/core/RadioGroup'));
 var Radio$1 = _interopDefault(require('@material-ui/core/Radio'));
 var Checkbox = _interopDefault(require('@material-ui/core/Checkbox'));
@@ -52,30 +90,316 @@ var utils = require('@surveycake/utils');
 var reactDom = require('react-dom');
 var rhooks = require('@surveycake/rhooks');
 var MuiModal = _interopDefault(require('@material-ui/core/Modal'));
-var Backdrop$1 = _interopDefault(require('@material-ui/core/Backdrop'));
 var MuiSnackbar = _interopDefault(require('@material-ui/core/Snackbar'));
 var MuiSnackbarContent = _interopDefault(require('@material-ui/core/SnackbarContent'));
 var Slide = _interopDefault(require('@material-ui/core/Slide'));
 var MuiDivider = _interopDefault(require('@material-ui/core/Divider'));
 var DateFnsUtils = _interopDefault(require('@date-io/date-fns'));
 
-var Facebook =
+var core =
 /*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    "aria-label": "facebook",
-    viewBox: "0 0 320 512"
-  }), React__default.createElement("path", {
-    d: "M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
-  }));
+styles$5.createTheme({
+  breakpoints: {
+    values: {
+      xl: 1440,
+      lg: 1024,
+      md: 960,
+      sm: 600,
+      xs: 375
+    }
+  },
+  palette: {
+    primary: {
+      light: '#93DCC3',
+      main: '#3DBA90',
+      dark: '#009974'
+    },
+    secondary: {
+      light: '#668A97',
+      main: '#325A69',
+      dark: '#11303C'
+    },
+    error: {
+      light: '#F9DEE2',
+      main: '#EE415D',
+      dark: '#C9354D'
+    },
+    warning: {
+      light: '#FEF1E1',
+      main: '#F4A91F',
+      dark: '#E9A01C'
+    },
+    info: {
+      light: '#BADFEF',
+      main: '#43B8EB',
+      dark: '#0094D3'
+    },
+    success: {
+      light: '#EBF5DF',
+      main: '#88C936',
+      dark: '#66B204'
+    },
+    grey: {
+      50: '#FFFFFF',
+      100: '#EEEEEE',
+      200: '#D2D2D2',
+      300: '#BDBDBD',
+      400: '#AAAAAA',
+      500: '#989898',
+      600: '#6B6B6B',
+      700: '#454545',
+      800: '#3F3F3F',
+      900: '#333333',
+      A100: '#FAFAFA',
+      A200: '#EEEEEE',
+      A400: '#E3E3E3',
+      A700: '#C5C5C5'
+    },
+    text: {
+      primary: '#454545'
+    }
+  },
+  typography: {
+    fontFamily:
+    /*#__PURE__*/
+    ['Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans TC', 'Apple LiGothic', '微軟正黑體', 'Microsoft JhengHei', 'sans-serif', 'PingFangTC-Regular'].join(','),
+    h1: {
+      fontSize: '2rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    h2: {
+      fontSize: '1.75rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    h3: {
+      fontSize: '1.5rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    h4: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    h5: {
+      fontSize: '1.125rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    h6: {
+      fontSize: '1rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    subtitle1: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    body1: {
+      fontSize: '1rem',
+      fontWeight: 400,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    body2: {
+      fontSize: '0.875rem',
+      fontWeight: 400,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    button: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    caption: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    },
+    overline: {
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      letterSpacing: 0,
+      textTransform: 'none'
+    }
+  }
 });
 
+var MuiBackdrop = {
+  root: {
+    backgroundColor:
+    /*#__PURE__*/
+    polished.rgba(core.palette.common.black, 0.4)
+  }
+};
+
+var MuiButton = {
+  root: {
+    padding: '7px 49px',
+    minWidth: '60px'
+  },
+  contained: {
+    backgroundColor: core.palette.grey.A200,
+    color: core.palette.grey[600],
+    padding: '7px 49px',
+    '&:hover': {
+      backgroundColor: core.palette.grey.A400
+    },
+    '&:disabled': {
+      backgroundColor: core.palette.grey[300],
+      color: core.palette.grey[50]
+    }
+  },
+  containedSizeSmall: {
+    padding: '6px 16px'
+  },
+  containedSizeLarge: {
+    padding: '8px 67px'
+  },
+  containedPrimary: {
+    color: core.palette.grey[50]
+  },
+  text: {
+    color: core.palette.grey[600],
+    padding: '7px 49px',
+    '&:hover': {
+      backgroundColor: core.palette.grey.A400
+    },
+    '&:disabled': {
+      color: core.palette.grey[300]
+    }
+  },
+  textSizeSmall: {
+    padding: '6px 16px'
+  },
+  textSizeLarge: {
+    padding: '8px 67px'
+  },
+  textPrimary: {
+    color: core.palette.grey[600],
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main)
+    }
+  },
+  textSecondary: {
+    color: core.palette.grey[600],
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.secondary.main)
+    }
+  },
+  outlined: {
+    color: core.palette.grey[600],
+    padding: '6px 48px',
+    border: "1px solid " + core.palette.grey[600],
+    '&:disabled': {
+      color: core.palette.grey[300],
+      border: "1px solid " + core.palette.grey[300]
+    }
+  },
+  outlinedSizeLarge: {
+    padding: '7px 66px'
+  },
+  outlinedSizeSmall: {
+    padding: '5px 15px'
+  },
+  outlinedPrimary: {
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main)
+    }
+  },
+  outlinedSecondary: {
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.secondary.main)
+    }
+  }
+};
+
+var MuiDialogActions = {
+  root: {
+    padding:
+    /*#__PURE__*/
+    core.spacing(2, 3, 2)
+  },
+  spacing: {
+    '& > :not(:first-child)': {
+      marginLeft:
+      /*#__PURE__*/
+      core.spacing(2)
+    }
+  }
+};
 
+var MuiDialogContent = {
+  root: {
+    padding:
+    /*#__PURE__*/
+    core.spacing(1, 3, 3)
+  },
+  dividers: {
+    borderTop: 'none',
+    padding: '8px 24px 24px'
+  }
+};
 
-var index = {
-  __proto__: null,
-  Facebook: Facebook
+var MuiDialogTitle = {
+  root: {
+    padding:
+    /*#__PURE__*/
+    core.spacing(3, 3, 1)
+  }
+};
+
+var MuiFormControlLabel = {
+  label: {
+    color: core.palette.text.primary,
+    '&.Mui-disabled': {
+      color: core.palette.grey[300]
+    },
+    fontSize: core.typography.button.fontSize,
+    fontWeight: core.typography.button.fontWeight
+  }
+};
+
+var MuiFormHelperText = {
+  root: {
+    marginTop:
+    /*#__PURE__*/
+    core.spacing(1),
+    color: core.palette.grey[600]
+  }
 };
 
 function _extends() {
@@ -120,335 +444,983 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700|Roboto:400,500,700&display=swap&subset=chinese-traditional');\n  "]);
+var MuiFormLabel = {
+  root:
+  /*#__PURE__*/
+  _extends({}, core.typography.caption, {
+    color: core.palette.grey[700]
+  })
+};
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var MuiIconButton = {
+  colorPrimary: {
+    '&:focus': {
+      color: core.palette.primary.main,
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main)
+    },
+    '&:hover': {
+      color: core.palette.primary.main,
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main)
+    }
+  }
+};
 
-  return data;
-}
-var theme =
+var MuiLink = {
+  root: {
+    '&:hover': {
+      color: function color(props) {
+        return props.color && (props.color === 'primary' || props.color === 'secondary' || props.color === 'error') ? core.palette[props.color].dark : 'inherit';
+      }
+    }
+  }
+};
+
+var MuiList = {
+  root: {
+    backgroundColor: core.palette.common.white
+  },
+  padding: {
+    paddingLeft:
+    /*#__PURE__*/
+    core.spacing(1),
+    paddingRight:
+    /*#__PURE__*/
+    core.spacing(1)
+  }
+};
+
+var MuiListSubheader = {
+  root: {
+    lineHeight: 1.6,
+    color: core.palette.grey[500]
+  }
+};
+
+var MuiMenuItem = {
+  root:
+  /*#__PURE__*/
+  _extends({}, core.typography.body2, {
+    padding:
+    /*#__PURE__*/
+    core.spacing(0.5) + "px " +
+    /*#__PURE__*/
+    core.spacing(1) + "px",
+    '&.Mui-selected': {
+      color: core.palette.primary.main,
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main),
+      '&:hover': {
+        backgroundColor:
+        /*#__PURE__*/
+        polished.lighten(0.45, core.palette.primary.main)
+      }
+    },
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.3, core.palette.primary.main),
+      color: core.palette.primary.dark
+    }
+  })
+};
+
+var MuiOutlinedInput = {
+  root:
+  /*#__PURE__*/
+  _extends({
+    'label + &': {
+      marginTop:
+      /*#__PURE__*/
+      core.spacing(1)
+    },
+    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+      borderWidth: 1
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: function borderColor(props) {
+        return props.color && (props.color === 'primary' || props.color === 'secondary') ? core.palette[props.color].main : core.palette.primary.main;
+      }
+    },
+    '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: core.palette.error.main
+    }
+  }, core.typography.body2),
+  input: {
+    paddingTop:
+    /*#__PURE__*/
+    core.spacing(1.5),
+    paddingRight:
+    /*#__PURE__*/
+    core.spacing(1),
+    paddingBottom:
+    /*#__PURE__*/
+    core.spacing(1.5),
+    paddingLeft:
+    /*#__PURE__*/
+    core.spacing(1)
+  },
+  notchedOutline: {
+    borderColor: core.palette.grey.A700
+  }
+};
+
+var useMenuStyles =
 /*#__PURE__*/
-function () {
-  emotion.injectGlobal(_templateObject());
-  return styles$5.createTheme({
-    palette: {
-      primary: {
-        light: '#93DCC3',
-        main: '#3DBA90',
-        dark: '#009974'
-      },
-      error: {
-        light: '#F9DEE2',
-        main: '#EE415D',
-        dark: '#C9354D'
-      },
-      warning: {
-        light: '#F5E3C6',
-        main: '#F4A91F',
-        dark: '#E9A01C'
-      },
-      info: {
-        light: '#BADFEF',
-        main: '#43B8EB',
-        dark: '#0094D3'
-      },
-      success: {
-        light: '#EBF5DF',
-        main: '#88C936',
-        dark: '#66B204'
-      },
-      grey: {
-        50: '#FFFFFF',
-        100: '#EEEEEE',
-        200: '#D2D2D2',
-        300: '#BDBDBD',
-        400: '#AAAAAA',
-        500: '#989898',
-        600: '#6B6B6B',
-        700: '#454545',
-        800: '#3F3F3F',
-        900: '#333333',
-        A100: '#FAFAFA',
-        A200: '#EEEEEE',
-        A400: '#E3E3E3',
-        A700: '#C5C5C5'
-      },
-      text: {
-        primary: '#454545'
+styles$5.makeStyles(function (theme) {
+  return {
+    root: {
+      boxShadow: 'none',
+      border: "1px solid " + theme.palette.primary.main
+    }
+  };
+});
+var MuiSelect = {
+  root:
+  /*#__PURE__*/
+  _extends({}, core.typography.body2, {
+    color: core.palette.grey[700]
+  }),
+  select: {
+    '&:focus': {
+      backgroundColor: core.palette.common.white
+    }
+  },
+  outlined: {
+    padding: "9px 32px 9px 9px"
+  },
+  icon: {
+    color: core.palette.grey[400],
+    fontSize: '1rem',
+    top: 'calc(50% - 8px)'
+  }
+};
+
+var MuiSvgIcon = {
+  root: {
+    fontSize: '1.25rem'
+  },
+  colorAction: {
+    color: core.palette.grey[500]
+  },
+  fontSizeSmall: {
+    fontSize: '1rem'
+  },
+  fontSizeLarge: {
+    fontSize: '1.5rem'
+  }
+};
+
+var MuiSwitch = {
+  switchBase: {
+    '&.Mui-disabled': {
+      color: core.palette.common.white
+    },
+    '&.Mui-checked + .MuiSwitch-track': {
+      opacity: 1
+    },
+    '&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
+      backgroundColor: core.palette.grey[100],
+      opacity: 1
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      backgroundColor: core.palette.grey[100],
+      opacity: 1
+    }
+  },
+  track: {
+    opacity: 1,
+    backgroundColor: core.palette.grey[400],
+    border: "1px solid " + core.palette.grey.A200
+  },
+  colorPrimary: {
+    '&.Mui-disabled': {
+      color: core.palette.common.white
+    },
+    '&.Mui-checked': {
+      color: core.palette.common.white
+    },
+    '&.Mui-checked + .MuiSwitch-track': {
+      backgroundColor: core.palette.primary.main
+    },
+    '&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.3, core.palette.primary.main),
+      opacity: 1
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      backgroundColor: core.palette.grey[100],
+      opacity: 1
+    }
+  },
+  colorSecondary: {
+    '&.Mui-disabled': {
+      color: core.palette.common.white
+    },
+    '&.Mui-checked': {
+      color: core.palette.common.white
+    },
+    '&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.3, core.palette.secondary.main),
+      opacity: 1
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      backgroundColor: core.palette.grey[100],
+      opacity: 1
+    }
+  }
+};
+
+var MuiTab = {
+  root: {
+    padding: 0,
+    minHeight: 64,
+    maxWidth: 'initial',
+    minWidth: 'initial',
+    color: core.palette.grey[600],
+    fontSize: '1rem',
+    fontWeight: 400,
+    letterSpacing: 0,
+    textTransform: 'none',
+    '@media (min-width: 600px)': {
+      minWidth: 'initial'
+    },
+    '&:hover': {
+      color: core.palette.grey[700]
+    }
+  },
+  textColorPrimary: {
+    color: core.palette.grey[600],
+    '&$selected': {
+      '&:hover': {
+        color: core.palette.primary.dark
       }
+    }
+  }
+};
+
+var MuiTabs = {
+  flexContainer: {
+    columnGap: 24
+  }
+};
+
+var MuiToggleButton = {
+  root: {
+    borderColor: core.palette.grey.A400,
+    color: core.palette.grey[600],
+    padding: '5px 15px',
+    '&:hover': {
+      backgroundColor:
+      /*#__PURE__*/
+      styles$5.alpha(core.palette.primary.light, 0.2),
+      color: core.palette.primary.main
     },
-    typography: {
-      fontFamily: ['Noto Sans TC', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', 'Apple LiGothic', '微軟正黑體', 'Microsoft JhengHei', 'sans-serif', 'PingFangTC-Regular'].join(','),
-      h1: {
-        fontSize: '1.5rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '2rem'
-        }
-      },
-      h2: {
-        fontSize: '1.375rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '1.75rem'
-        }
-      },
-      h3: {
-        fontSize: '1.25rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '1.5rem'
-        }
-      },
-      h4: {
-        fontSize: '1.125rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '1.25rem'
-        }
-      },
-      h5: {
-        fontSize: '1rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '1.125rem'
-        }
-      },
-      h6: {
-        fontSize: '0.875rem',
-        fontWeight: 500,
-        lineHeight: 1.6,
-        '@media (min-width:1025px)': {
-          fontSize: '1rem'
-        }
-      },
-      subtitle1: {
-        fontSize: '0.875rem',
-        fontWeight: 500,
-        lineHeight: 1.6
-      },
-      body1: {
-        fontSize: '1rem',
-        fontWeight: 400,
-        lineHeight: 1.6
-      },
-      body2: {
-        fontSize: '0.875rem',
-        fontWeight: 400,
-        lineHeight: 1.6
-      },
-      button: {
-        fontSize: '0.875rem',
-        fontWeight: 500,
-        lineHeight: 1.6
+    '&$selected': {
+      backgroundColor: core.palette.primary.main,
+      borderColor: core.palette.primary.main,
+      color: core.palette.grey[50],
+      '&:hover': {
+        backgroundColor:
+        /*#__PURE__*/
+        styles$5.alpha(core.palette.primary.main, 0.95),
+        color: core.palette.grey[50]
+      }
+    }
+  }
+};
+
+var MuiToggleButtonGroup = {
+  groupedHorizontal: {
+    '&:hover': {
+      borderColor: core.palette.primary.main
+    }
+  }
+};
+
+var MuiTooltip = {
+  arrow: {
+    color: core.palette.grey[700]
+  },
+  tooltip: {
+    backgroundColor: core.palette.grey[700],
+    boxShadow: '0px 1px 2px rgba(69, 69, 69, 0.1), 0px 1px 4px rgba(69, 69, 69, 0.2)',
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: 1.6,
+    padding: 8
+  }
+};
+
+var _h, _h2, _h3, _h4, _h5, _h6;
+var MuiTypography = {
+  h1: (_h = {}, _h[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '1.5rem'
+  }, _h),
+  h2: (_h2 = {}, _h2[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '1.375rem'
+  }, _h2),
+  h3: (_h3 = {}, _h3[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '1.25rem'
+  }, _h3),
+  h4: (_h4 = {}, _h4[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '1.125rem'
+  }, _h4),
+  h5: (_h5 = {}, _h5[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '1rem'
+  }, _h5),
+  h6: (_h6 = {}, _h6[
+  /*#__PURE__*/
+  core.breakpoints.down('md')] = {
+    fontSize: '0.875rem'
+  }, _h6)
+};
+
+var useMUITheme = function useMUITheme() {
+  return styles$5.useTheme();
+};
+var theme =
+/*#__PURE__*/
+styles$5.createTheme({
+  overrides: {
+    MuiBackdrop: MuiBackdrop,
+    MuiButton: MuiButton,
+    MuiDialogActions: MuiDialogActions,
+    MuiDialogContent: MuiDialogContent,
+    MuiDialogTitle: MuiDialogTitle,
+    MuiFormControlLabel: MuiFormControlLabel,
+    MuiFormHelperText: MuiFormHelperText,
+    MuiFormLabel: MuiFormLabel,
+    MuiIconButton: MuiIconButton,
+    MuiLink: MuiLink,
+    MuiList: MuiList,
+    MuiListSubheader: MuiListSubheader,
+    MuiMenuItem: MuiMenuItem,
+    MuiOutlinedInput: MuiOutlinedInput,
+    MuiSelect: MuiSelect,
+    MuiSvgIcon: MuiSvgIcon,
+    MuiSwitch: MuiSwitch,
+    MuiTab: MuiTab,
+    MuiTabs: MuiTabs,
+    MuiToggleButton: MuiToggleButton,
+    MuiToggleButtonGroup: MuiToggleButtonGroup,
+    MuiTooltip: MuiTooltip,
+    MuiTypography: MuiTypography
+  }
+}, core);
+
+var ThemeProvider = function ThemeProvider(props) {
+  var children = props.children;
+  return React__default.createElement(emotionTheming.ThemeProvider, {
+    theme: theme
+  }, React__default.createElement(styles$5.StylesProvider, {
+    injectFirst: true
+  }, React__default.createElement(styles$5.ThemeProvider, {
+    theme: theme
+  }, children)));
+};
+var PureThemeProvider = function PureThemeProvider(props) {
+  return React__default.createElement(styles$5.ThemeProvider, {
+    theme: theme
+  }, props.children);
+};
+
+var Backdrop =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIBackdrop, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+Backdrop.displayName = 'Backdrop';
+
+var Box = function Box(props) {
+  return React__default.createElement(Box$1, Object.assign({}, props), props.children);
+};
+
+Box.displayName = 'Box';
+
+var Button =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      _props$disableElevati = props.disableElevation,
+      disableElevation = _props$disableElevati === void 0 ? true : _props$disableElevati,
+      rest = _objectWithoutPropertiesLoose(props, ["size", "disableElevation"]);
+
+  return React__default.createElement(MUIButton, Object.assign({}, rest, {
+    disableElevation: disableElevation,
+    ref: ref,
+    size: size
+  }));
+});
+Button.displayName = 'Button';
+
+var ButtonGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIButtonGroup, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+ButtonGroup.displayName = 'ButtonGroup';
+
+var CircularProgress =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUICircularProgress, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+CircularProgress.displayName = 'CircularProgress';
+
+var CssBaseline = function CssBaseline(props) {
+  return React__default.createElement(MUICssBaseline, Object.assign({}, props), props.children);
+};
+
+var Dialog =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var rest = _objectWithoutPropertiesLoose(props, ["disableBackdropClick", "onBackdropClick", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "onRendered"]);
+
+  return React__default.createElement(MUIDialog, Object.assign({}, rest, {
+    ref: ref
+  }), props.children);
+});
+Dialog.displayName = 'Dialog';
+
+var DialogActions =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIDialogActions, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+DialogActions.displayName = 'DialogActions';
+
+var DialogContent =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIDialogContent, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+DialogContent.displayName = 'DialogContent';
+
+var DialogContentText =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIDialogContentText, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+DialogContentText.displayName = 'DialogContentText';
+
+var DialogTitle =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIDialogTitle, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+DialogTitle.displayName = 'DialogTitle';
+
+var Fade =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(Fade$1, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+Fade.displayName = 'Fade';
+
+var FormControl =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIFormControl, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+FormControl.displayName = 'FormControl';
+
+var FormControlLabel =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIFormControlLabel, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+FormControlLabel.displayName = 'FormControlLabel';
+
+var FormGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIFormGroup, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+FormGroup.displayName = 'FormGroup';
+
+var FormHelperText =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIFormHelperText, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+FormHelperText.displayName = 'FormHelperText';
+
+var FormLabel =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var rest = _extends({}, props);
+
+  return React__default.createElement(MUIFormLabel, Object.assign({}, rest, {
+    ref: ref
+  }), props.children);
+});
+FormLabel.displayName = 'FormLabel';
+
+var FilterAlt =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 0 24 24"
+  }), React__default.createElement("g", null, React__default.createElement("path", {
+    d: "M0,0h24 M24,24H0",
+    fill: "none"
+  }), React__default.createElement("path", {
+    d: "M4.25,5.61C6.27,8.2,10,13,10,13v6c0,0.55,0.45,1,1,1h2c0.55,0,1-0.45,1-1v-6c0,0,3.72-4.8,5.74-7.39 C20.25,4.95,19.78,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"
+  }), React__default.createElement("path", {
+    d: "M0,0h24v24H0V0z",
+    fill: "none"
+  })));
+});
+FilterAlt.displayName = 'FilterAlt';
+
+var Icons = {
+  AddCircleOutline: AddCircleOutline,
+  ArrowDropDown: ArrowDropDown,
+  Cancel: Cancel,
+  CheckCircle: CheckCircle$2,
+  Close: Close,
+  Delete: Delete,
+  Edit: Edit,
+  FilterAlt: FilterAlt,
+  FormatBold: FormatBold,
+  FormatColorFill: FormatColorFill,
+  FormatItalic: FormatItalic,
+  FormatUnderlined: FormatUnderlined,
+  Help: Help,
+  HelpOutline: HelpOutline,
+  Info: Info,
+  KeyboardArrowDown: KeyboardArrowDown,
+  Link: Link$3,
+  MoreHoriz: MoreHoriz,
+  NavigateNext: NavigateNext,
+  OpenInNew: OpenInNew,
+  ReportProblemRounded: ReportProblemRounded,
+  Schedule: Schedule,
+  Settings: Settings,
+  SettingsOutlined: SettingsOutlined,
+  WatchLater: WatchLater,
+  WebAsset: WebAsset
+};
+var Icon =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var name = props.name,
+      rest = _objectWithoutPropertiesLoose(props, ["name"]);
+
+  var RenderIcon = Icons[name];
+  return React__default.createElement(RenderIcon, Object.assign({}, rest, {
+    ref: ref
+  }));
+});
+Icon.displayName = 'Icon';
+
+var Select =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var theme = useMUITheme();
+
+  var _useMenuStyles = useMenuStyles(),
+      menuRoot = _useMenuStyles.root;
+
+  return React__default.createElement(MuiSelect$1, Object.assign({}, props, {
+    ref: ref,
+    IconComponent: Icons.KeyboardArrowDown,
+    MenuProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
       },
-      caption: {
-        fontSize: '0.875rem',
-        fontWeight: 400,
-        lineHeight: 1.6
+      transformOrigin: {
+        vertical: -theme.spacing(1),
+        horizontal: 'left'
       },
-      overline: {
-        fontSize: '0.75rem',
-        fontWeight: 500,
-        lineHeight: 1.6
+      getContentAnchorEl: null,
+      classes: {
+        paper: menuRoot
       }
     }
-  });
-}();
+  }), props.children);
+});
+Select.displayName = 'Select';
 
-var ThemeProvider = function ThemeProvider(props) {
-  var children = props.children;
-  return React__default.createElement(emotionTheming.ThemeProvider, {
-    theme: theme
-  }, React__default.createElement(styles$5.StylesProvider, {
-    injectFirst: true
-  }, React__default.createElement(styles$5.ThemeProvider, {
-    theme: theme
-  }, children)));
-};
+var ListSubheader =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$disableGutters = props.disableGutters,
+      disableGutters = _props$disableGutters === void 0 ? true : _props$disableGutters,
+      rest = _objectWithoutPropertiesLoose(props, ["disableGutters"]);
 
-var useStyles =
+  return React__default.createElement(MuiListSubheader$1, Object.assign({}, rest, {
+    ref: ref,
+    disableGutters: disableGutters
+  }), props.children);
+});
+ListSubheader.displayName = 'ListSubheader';
+
+var MenuItem =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var rest = _objectWithoutPropertiesLoose(props, ["button"]);
+
+  return React__default.createElement(MuiMenuItem$1, Object.assign({}, rest, {
+    ref: ref
+  }), props.children);
+});
+MenuItem.displayName = 'MenuItem';
+
+var Typography =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(Typography$2, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+Typography.displayName = 'Typography';
+
+var useSelectStyle =
 /*#__PURE__*/
 styles$5.makeStyles(function (theme) {
   return {
-    root: {
-      padding: '7px 49px',
-      minWidth: '60px'
-    },
-    text: {
-      '& .MuiButton-label': {
-        color: theme.palette.grey[600]
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light,
-        '& .MuiButton-label': {
-          color: theme.palette.primary.main
-        }
-      },
-      '&:disabled > .MuiButton-label': {
-        color: theme.palette.grey[400]
-      }
-    },
-    outlined: {
-      '& .MuiButton-label': {
-        color: 'inherit'
-      }
-    },
-    outlinedPrimary: {
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light
-      }
-    },
-    contained: {
-      boxShadow: 'none',
-      '& > .MuiButton-label': {
-        color: theme.palette.grey[500]
-      },
-      '&:hover': {
-        boxShadow: 'none',
-        backgroundColor: theme.palette.grey[100],
-        '& .MuiButton-label': {
-          color: theme.palette.grey[600]
-        }
-      },
-      '&:disabled': {
-        backgroundColor: theme.palette.grey[200],
-        '& > .MuiButton-label': {
-          color: theme.palette.grey[700]
-        }
-      }
-    },
-    containedPrimary: {
-      '& > .MuiButton-label': {
-        color: theme.palette.common.white
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.primary.dark,
-        '& .MuiButton-label': {
-          color: theme.palette.common.white
-        }
-      },
-      '&:disabled': {
-        backgroundColor: theme.palette.grey[300],
-        '& > .MuiButton-label': {
-          color: theme.palette.common.white
-        }
-      }
-    },
-    containedSecondary: {
-      '& > .MuiButton-label': {
-        color: theme.palette.common.white
-      },
+    select: {
+      padding: '5px 8px',
+      display: 'inline-flex',
+      backgroundColor: theme.palette.common.white,
+      height: '30px'
+    }
+  };
+});
+var useCustomOptionStyle =
+/*#__PURE__*/
+styles$5.makeStyles(function (theme) {
+  return {
+    container: {
+      backgroundColor: theme.palette.common.white,
       '&:hover': {
-        backgroundColor: theme.palette.secondary.dark,
-        '& .MuiButton-label': {
+        backgroundColor: polished.lighten(0.3, theme.palette.primary.main),
+        '& > div': {
+          backgroundColor: theme.palette.primary.main,
           color: theme.palette.common.white
         }
       },
-      '&:disabled': {
-        backgroundColor: theme.palette.grey[700],
-        '& > .MuiButton-label': {
+      '&.Mui-selected': {
+        backgroundColor: polished.lighten(0.45, theme.palette.primary.main),
+        '& > div': {
+          backgroundColor: theme.palette.primary.main,
           color: theme.palette.common.white
         }
       }
     },
-    sizeSmall: {
-      padding: '5px 15px',
-      fontSize: theme.typography.button.fontSize
+    root: {
+      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      color: theme.palette.grey[600],
+      backgroundColor: theme.palette.grey[100],
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      borderRadius: theme.spacing(0.5),
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(100% - 16px)',
+      transition: '0.2s',
+      transitionProperty: 'color, background-color'
     },
-    sizeLarge: {
-      padding: '8px 67px',
-      fontSize: theme.typography.body1.fontSize,
-      '@media (min-width:1025px)': {
-        fontSize: '1rem'
+    "var": {
+      '&::before': {
+        content: '"# "'
       }
     }
   };
 });
 
-var Button =
+function _templateObject() {
+  var data = _taggedTemplateLiteralLoose(["\n                        color: ", ";\n                      "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var VarSelect =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
-  return React__default.createElement(MUIButton, Object.assign({
-    size: "small"
-  }, props, {
+  var theme = useMUITheme();
+  var customOptionStyle = useCustomOptionStyle();
+  var selectStyle = useSelectStyle();
+
+  var groups = props.groups,
+      options = props.options,
+      value = props.value,
+      onChange = props.onChange,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      rest = _objectWithoutPropertiesLoose(props, ["groups", "options", "value", "onChange", "variant", "onOpen", "onClose"]);
+
+  return React__default.createElement(Select, Object.assign({}, rest, {
+    ref: ref,
+    value: value,
+    onChange: onChange,
+    variant: variant,
+    onOpen: onOpen,
+    onClose: onClose,
+    displayEmpty: true,
+    fullWidth: true,
+    classes: selectStyle
+  }), groups && groups.map(function (group) {
+    return [React__default.createElement(ListSubheader, {
+      style: {
+        pointerEvents: 'none'
+      }
+    }, group.groupTitle), group.options.map(function (opt) {
+      if (opt.emptyLabel) {
+        return React__default.createElement(MenuItem, {
+          style: {
+            pointerEvents: 'none'
+          }
+        }, React__default.createElement(Typography, {
+          variant: "body2",
+          className: emotion.css(_templateObject(), theme.palette.grey[500])
+        }, opt.emptyLabel));
+      }
+
+      return React__default.createElement(MenuItem, {
+        className: customOptionStyle.container,
+        value: opt.value,
+        key: opt.value
+      }, React__default.createElement("div", {
+        className: emotion.cx(customOptionStyle.root, customOptionStyle[group.optionType])
+      }, opt.children));
+    })];
+  }), options && options.map(function (opt) {
+    return React__default.createElement(MenuItem, {
+      className: customOptionStyle.container,
+      value: opt.value,
+      key: opt.value
+    }, React__default.createElement("div", {
+      className: emotion.cx(customOptionStyle.root, customOptionStyle[opt.optionType])
+    }, opt.children));
+  }));
+});
+VarSelect.displayName = 'VarSelect';
+
+var IconButton =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIIconButton, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+IconButton.displayName = 'IconButton';
+
+var Link =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$underline = props.underline,
+      underline = _props$underline === void 0 ? 'none' : _props$underline,
+      rest = _objectWithoutPropertiesLoose(props, ["underline"]);
+
+  return React__default.createElement(MUILink, Object.assign({}, rest, {
     ref: ref,
-    classes: useStyles()
+    underline: underline
   }));
 });
+Link.displayName = 'Link';
 
-var Typography =
+var LoadingButton =
 /*#__PURE__*/
-React.forwardRef(function (_ref, ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'textPrimary' : _ref$color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["color"]);
+React.forwardRef(function (props, ref) {
+  var _props$loading = props.loading,
+      loading = _props$loading === void 0 ? true : _props$loading,
+      rest = _objectWithoutPropertiesLoose(props, ["loading"]);
+
+  return React__default.createElement(Button, Object.assign({}, rest, {
+    startIcon: loading && React__default.createElement(CircularProgress, {
+      size: "1rem",
+      color: "inherit"
+    }),
+    ref: ref
+  }));
+});
+LoadingButton.displayName = 'LoadingButton';
+
+var OutlinedInput =
+/*#__PURE__*/
+React.forwardRef(function OutlinedInput(props, ref) {
+  return React__default.createElement(MUIOutlinedInput, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+OutlinedInput.displayName = 'OutlinedInput';
+
+var Switch =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$color = props.color,
+      color = _props$color === void 0 ? 'default' : _props$color,
+      rest = _objectWithoutPropertiesLoose(props, ["color"]);
 
-  return React__default.createElement(Typography$2, Object.assign({}, rest, {
+  return React__default.createElement(MUISwitch, Object.assign({}, rest, {
     ref: ref,
     color: color
   }));
 });
+Switch.displayName = 'Switch';
 
-var useStyles$1 =
+var Tab =
 /*#__PURE__*/
-styles$5.makeStyles(function (theme) {
-  return {
-    underlineHover: {
-      '&:hover': {
-        color: function color(props) {
-          return props.color && (props.color === 'primary' || props.color === 'secondary') ? theme.palette[props.color].dark : theme.palette.primary.dark;
-        }
-      }
-    }
-  };
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUITab, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
 });
 
-var Link =
+var Tabs =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
-  return React__default.createElement(MUILink, Object.assign({}, props, {
+  var children = props.children,
+      _props$indicatorColor = props.indicatorColor,
+      indicatorColor = _props$indicatorColor === void 0 ? 'primary' : _props$indicatorColor,
+      _props$textColor = props.textColor,
+      textColor = _props$textColor === void 0 ? 'primary' : _props$textColor,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "indicatorColor", "onFocusVisible", "textColor"]);
+
+  return React__default.createElement(MUITabs, Object.assign({}, restProps, {
     ref: ref,
-    classes: useStyles$1(props)
-  }));
+    indicatorColor: indicatorColor,
+    textColor: textColor
+  }), children);
 });
+Tabs.displayName = 'Tabs';
 
-var Icons = {
-  Cancel: Cancel,
-  Info: Info,
-  CheckCircle: CheckCircle$2,
-  Facebook: Facebook
-};
-var Icon =
+var TextField =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
-  var name = props.name,
-      rest = _objectWithoutPropertiesLoose(props, ["name"]);
+  return React__default.createElement(MUITextField, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+TextField.displayName = 'TextField';
 
-  var RenderIcon = Icons[name];
-  return React__default.createElement(RenderIcon, Object.assign({}, rest, {
+var ToggleButton =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIToggleButton, Object.assign({}, props, {
     ref: ref
   }));
 });
+ToggleButton.displayName = 'ToggleButton';
+
+var ToggleButtonGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIToggleButtonGroup, Object.assign({}, props, {
+    ref: ref
+  }), props.children);
+});
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
+var Tooltip =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var children = props.children,
+      _props$enterTouchDela = props.enterTouchDelay,
+      enterTouchDelay = _props$enterTouchDela === void 0 ? 0 : _props$enterTouchDela,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "enterTouchDelay"]);
+
+  return React__default.createElement(MUITooltip, Object.assign({}, restProps, {
+    ref: ref,
+    enterTouchDelay: enterTouchDelay
+  }), children);
+});
+Tooltip.displayName = 'Tooltip';
 
 
-var index$1 = {
+
+var index = {
   __proto__: null,
-  CustomSvgIcon: index,
   theme: theme,
+  useMUITheme: useMUITheme,
   ThemeProvider: ThemeProvider,
+  PureThemeProvider: PureThemeProvider,
+  Backdrop: Backdrop,
+  Box: Box,
   Button: Button,
-  Typography: Typography,
+  ButtonGroup: ButtonGroup,
+  CircularProgress: CircularProgress,
+  CssBaseline: CssBaseline,
+  Dialog: Dialog,
+  DialogActions: DialogActions,
+  DialogContent: DialogContent,
+  DialogContentText: DialogContentText,
+  DialogTitle: DialogTitle,
+  Fade: Fade,
+  FormControl: FormControl,
+  FormControlLabel: FormControlLabel,
+  FormGroup: FormGroup,
+  FormHelperText: FormHelperText,
+  FormLabel: FormLabel,
+  GroupSelect: VarSelect,
+  IconButton: IconButton,
   Link: Link,
+  LoadingButton: LoadingButton,
+  MenuItem: MenuItem,
+  OutlinedInput: OutlinedInput,
+  Select: Select,
+  Switch: Switch,
+  Tab: Tab,
+  Tabs: Tabs,
+  TextField: TextField,
+  ToggleButton: ToggleButton,
+  ToggleButtonGroup: ToggleButtonGroup,
+  Tooltip: Tooltip,
+  Typography: Typography,
   Icon: Icon
 };
 
@@ -559,7 +1531,7 @@ var styles = function styles(theme) {
   });
 };
 
-var useStyles$2 =
+var useStyles =
 /*#__PURE__*/
 styles$5.makeStyles(styles);
 var Avatar =
@@ -571,12 +1543,12 @@ React.forwardRef(function (_ref, ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'circle' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'circular' : _ref$variant,
       width = _ref.width,
       height = _ref.height,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "src", "alt", "size", "variant", "width", "height"]);
 
-  var classes = useStyles$2({
+  var classes = useStyles({
     width: width,
     height: height
   });
@@ -703,11 +1675,11 @@ styles$5.styled(function (_ref) {
   return React__default.createElement(Chip$1, Object.assign({}, other));
 })({
   backgroundColor: function backgroundColor(props) {
-    return props.active ? 'white' : colorManipulator.fade(props.color || theme$1.color.primary["default"], 0.3);
+    return props.active ? 'white' : colorManipulator.alpha(props.color || theme$1.color.primary["default"], 0.3);
   },
   '&:hover, &:focus': {
     backgroundColor: function backgroundColor(props) {
-      return props.active ? 'white' : colorManipulator.fade(props.color || theme$1.color.primary["default"], 0.3);
+      return props.active ? 'white' : colorManipulator.alpha(props.color || theme$1.color.primary["default"], 0.3);
     }
   },
   '&:active': {
@@ -751,7 +1723,7 @@ var Chip = function Chip(_ref) {
   );
 };
 
-var index$2 = /*#__PURE__*/
+var index$1 = /*#__PURE__*/
 React.memo(Chip);
 
 var Paper =
@@ -762,7 +1734,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var useStyles$3 =
+var useStyles$1 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -785,7 +1757,7 @@ React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "className"]);
 
-  var _useStyles = useStyles$3(restProps),
+  var _useStyles = useStyles$1(restProps),
       root = _useStyles.root;
 
   return React__default.createElement(MuiCard, Object.assign({
@@ -1007,7 +1979,7 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 function useTheme() {
-  var theme = React.useContext(core.ThemeContext);
+  var theme = React.useContext(core$1.ThemeContext);
   return theme && theme.color ? theme : theme$1;
 }
 function makeStyles(styles) {
@@ -1067,7 +2039,7 @@ function resolveThemeColorProp(theme, color) {
   return typeof color === 'function' ? color(theme) : resolveThemeColorByPath(theme, color);
 }
 
-var useStyles$4 =
+var useStyles$2 =
 /*#__PURE__*/
 makeStyles([['typography', function (theme, _ref) {
   var variant = _ref[0],
@@ -1095,7 +2067,7 @@ React.forwardRef(function (_ref, ref) {
       noWrap = _ref.noWrap,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant", "color", "weight", "gutterBottom", "noWrap"]);
 
-  var styles = useStyles$4([Vari, color, weight, gutterBottom, noWrap]);
+  var styles = useStyles$2([Vari, color, weight, gutterBottom, noWrap]);
   return React__default.createElement(Vari, Object.assign({}, props, {
     className: className ? emotion.cx(styles.typography, className) : styles.typography,
     ref: ref
@@ -1260,7 +2232,7 @@ function hexToRgba(originColor, opacity) {
   return "rgba(" + rgb + ", " + opacity + ")";
 }
 
-var useStyles$5 =
+var useStyles$3 =
 /*#__PURE__*/
 makeStyles([['tag', function (theme, _ref) {
   var originColor = _ref[0],
@@ -1278,7 +2250,7 @@ var Tag = function Tag(_ref) {
       onClick = _ref.onClick,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "color", "variant", "onClick"]);
 
-  var styles = useStyles$5([color, variant, !!onClick]);
+  var styles = useStyles$3([color, variant, !!onClick]);
   return React__default.createElement("div", Object.assign({}, props, {
     className: className ? emotion.cx(styles.tag, className) : styles.tag,
     onClick: onClick
@@ -1291,7 +2263,7 @@ Tag.defaultProps = {
   variant: 'filled'
 };
 
-var Tooltip =
+var Tooltip$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -1302,7 +2274,7 @@ React.forwardRef(function (_ref, ref) {
       enterNextDelay = _ref.enterNextDelay,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "title", "arrow", "placement", "enterDelay", "enterNextDelay"]);
 
-  return React__default.createElement(MuiTooltip, Object.assign({
+  return React__default.createElement(MUITooltip, Object.assign({
     title: title,
     arrow: arrow,
     placement: placement,
@@ -1312,7 +2284,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$6 =
+var useStyles$4 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1411,7 +2383,7 @@ styles$5.makeStyles({
   }
 });
 
-var Select = function Select(props) {
+var Select$1 = function Select(props) {
   var options = props.options,
       value = props.value,
       onChange = props.onChange,
@@ -1425,9 +2397,9 @@ var Select = function Select(props) {
       isVarItem = _props$isVarItem === void 0 ? false : _props$isVarItem,
       restProps = _objectWithoutPropertiesLoose(props, ["options", "value", "onChange", "variant", "multiple", "onOpen", "onClose", "height", "backgroundColor", "isVarItem"]);
 
-  var classes = useStyles$6(props);
+  var classes = useStyles$4(props);
   var itemClasses = itemStyle(props);
-  return React__default.createElement(MuiSelect, Object.assign({
+  return React__default.createElement(MuiSelect$1, Object.assign({
     className: classes.root,
     value: value,
     onChange: onChange,
@@ -1438,7 +2410,7 @@ var Select = function Select(props) {
     displayEmpty: true,
     fullWidth: true
   }, restProps), options.map(function (option) {
-    return React__default.createElement(MuiMenuItem, {
+    return React__default.createElement(MuiMenuItem$1, {
       className: itemClasses.container,
       value: option.value,
       key: option.value
@@ -1486,7 +2458,7 @@ styles$5.createStyles({
     pointerEvents: 'none'
   }
 });
-var useCustomOptionStyle =
+var useCustomOptionStyle$1 =
 /*#__PURE__*/
 styles$5.makeStyles({
   container: {
@@ -1546,13 +2518,13 @@ styles$5.makeStyles({
 
 var StyledSelect =
 /*#__PURE__*/
-styles$5.withStyles(styles$3)(MuiSelect);
+styles$5.withStyles(styles$3)(MuiSelect$1);
 var StyledEmptyLabel =
 /*#__PURE__*/
-styles$5.withStyles(emptyStyles)(MuiListSubheader);
+styles$5.withStyles(emptyStyles)(MuiListSubheader$1);
 var StyledSubheader =
 /*#__PURE__*/
-styles$5.withStyles(subheaderStyles)(MuiListSubheader);
+styles$5.withStyles(subheaderStyles)(MuiListSubheader$1);
 
 var GroupSelect = function GroupSelect(props) {
   var groups = props.groups,
@@ -1562,7 +2534,7 @@ var GroupSelect = function GroupSelect(props) {
       variant = _props$variant === void 0 ? 'outlined' : _props$variant,
       onOpen = props.onOpen,
       onClose = props.onClose;
-  var classes = useCustomOptionStyle();
+  var classes = useCustomOptionStyle$1();
   return React__default.createElement(StyledSelect, {
     value: value,
     onChange: onChange,
@@ -1581,7 +2553,7 @@ var GroupSelect = function GroupSelect(props) {
         }, opt.emptyLabel);
       }
 
-      return React__default.createElement(MuiMenuItem, {
+      return React__default.createElement(MuiMenuItem$1, {
         className: classes.container,
         value: opt.value,
         key: opt.value
@@ -1673,7 +2645,7 @@ styled('span')(
 /*#__PURE__*/
 _templateObject5(), theme$1.color.text.B3, theme$1.typography.fontWeight.normal);
 
-var Switch =
+var Switch$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
@@ -1742,7 +2714,7 @@ var MenuList = function MenuList(_ref) {
     var TransitionProps = _ref2.TransitionProps;
 
     if (fade) {
-      return React__default.createElement(Fade, Object.assign({}, TransitionProps, {
+      return React__default.createElement(Fade$1, Object.assign({}, TransitionProps, {
         timeout: 400
       }), paper);
     } else {
@@ -1751,7 +2723,7 @@ var MenuList = function MenuList(_ref) {
   });
 };
 
-var useStyles$7 =
+var useStyles$5 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1772,12 +2744,12 @@ styles$5.makeStyles({
   }
 });
 
-var MenuItem = function MenuItem(props) {
+var MenuItem$1 = function MenuItem(props) {
   var children = props.children,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "backgroundColor", "color", "hoverBackgroundColor", "hoverColor"]);
 
-  var classes = useStyles$7(props);
-  return React__default.createElement(MuiMenuItem, Object.assign({}, restProps, {
+  var classes = useStyles$5(props);
+  return React__default.createElement(MuiMenuItem$1, Object.assign({}, restProps, {
     className: classes.root
   }), children);
 };
@@ -1810,9 +2782,9 @@ var styles$4 = function styles(theme) {
 
 var StyledMuiToggleButton =
 /*#__PURE__*/
-styles$5.withStyles(styles$4)(MuiToggleButton);
+styles$5.withStyles(styles$4)(MUIToggleButton);
 
-var ToggleButtonGroup = function ToggleButtonGroup(props) {
+var ToggleButtonGroup$1 = function ToggleButtonGroup(props) {
   var value = props.value,
       _props$exclusive = props.exclusive,
       exclusive = _props$exclusive === void 0 ? true : _props$exclusive,
@@ -1821,7 +2793,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
       size = _props$size === void 0 ? 'medium' : _props$size,
       toggleButtons = props.toggleButtons,
       ariaLabel = props.ariaLabel;
-  return React__default.createElement(MuiToggleButtonGroup, {
+  return React__default.createElement(MUIToggleButtonGroup, {
     value: value,
     exclusive: exclusive,
     onChange: onChange,
@@ -1844,7 +2816,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
 
 var CustomIconButton =
 /*#__PURE__*/
-styles$5.styled(IconButton)(function (_ref) {
+styles$5.styled(MUIIconButton)(function (_ref) {
   var theme = _ref.theme;
   return {
     fontSize: '1rem',
@@ -1966,7 +2938,7 @@ var Pagination = function Pagination(_ref) {
   var hasPrev = pageIndex > 0;
   var hasNext = pageIndex < totalPages - 1;
   var styles = useTextFieldStyles();
-  return React__default.createElement(Box, {
+  return React__default.createElement(Box$1, {
     display: "inline-flex",
     alignItems: "center",
     color: "grey.500"
@@ -1976,12 +2948,12 @@ var Pagination = function Pagination(_ref) {
     tabIndex: hasPrev ? 0 : undefined,
     "aria-disabled": !hasPrev,
     size: "small"
-  }), React__default.createElement(Box, {
+  }), React__default.createElement(Box$1, {
     display: "flex",
     alignItems: "center",
     "data-page": pageIndex + 1,
     "data-total-pages": totalPages
-  }, React__default.createElement(TextField, {
+  }, React__default.createElement(MUITextField, {
     classes: {
       root: styles.root
     },
@@ -1997,7 +2969,7 @@ var Pagination = function Pagination(_ref) {
     onKeyUp: onKeyUp,
     onBlur: onBlur,
     variant: "outlined"
-  }), React__default.createElement(Box, {
+  }), React__default.createElement(Box$1, {
     pr: 0.5,
     pl: 1
   }, React__default.createElement(Typography$2, {
@@ -2013,10 +2985,10 @@ var Pagination = function Pagination(_ref) {
   }));
 };
 
-var index$3 = /*#__PURE__*/
+var index$2 = /*#__PURE__*/
 React.memo(Pagination);
 
-var useStyles$8 =
+var useStyles$6 =
 /*#__PURE__*/
 styles$5.makeStyles({
   scrollButtons: {
@@ -2038,7 +3010,7 @@ styles$5.makeStyles({
   }
 });
 
-var Tabs =
+var Tabs$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -2046,8 +3018,8 @@ React.forwardRef(function (_ref, ref) {
       onChange = _ref.onChange,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "value", "onChange"]);
 
-  var classes = useStyles$8();
-  return React__default.createElement(MuiTabs, Object.assign({
+  var classes = useStyles$6();
+  return React__default.createElement(MUITabs, Object.assign({
     ref: ref,
     value: value,
     onChange: onChange,
@@ -2057,7 +3029,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$9 =
+var useStyles$7 =
 /*#__PURE__*/
 styles$5.makeStyles(function (theme) {
   return styles$5.createStyles({
@@ -2084,7 +3056,7 @@ styles$5.makeStyles(function (theme) {
   });
 });
 
-var Tab =
+var Tab$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
@@ -2093,8 +3065,8 @@ React.forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "icon", "value"]);
 
-  var classes = useStyles$9();
-  return React__default.createElement(MuiTab, Object.assign({
+  var classes = useStyles$7();
+  return React__default.createElement(MUITab, Object.assign({
     ref: ref,
     classes: classes,
     label: label,
@@ -2121,7 +3093,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$a =
+var useStyles$8 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -2166,7 +3138,7 @@ React.forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["disabled", "checked", "value", "classes"]);
 
-  var css = useStyles$a();
+  var css = useStyles$8();
   return React__default.createElement(Radio$1, Object.assign({
     ref: ref,
     value: value,
@@ -2274,7 +3246,7 @@ React.forwardRef(function (_ref, ref) {
     className: StepperContainer
   }, restProps), stepsWithConnector);
 });
-var index$4 = /*#__PURE__*/
+var index$3 = /*#__PURE__*/
 React.memo(Stepper);
 
 function _templateObject$5() {
@@ -2324,7 +3296,7 @@ React.forwardRef(function (_ref, ref) {
     active: active
   }, restProps), children);
 });
-var index$5 = /*#__PURE__*/
+var index$4 = /*#__PURE__*/
 React.memo(Step);
 
 function _templateObject$6() {
@@ -2913,7 +3885,7 @@ var icons = {
   warning: ExclamationCircle
 };
 
-var useStyles$b =
+var useStyles$9 =
 /*#__PURE__*/
 makeStyles([['message', function (theme, _ref) {
   var visible = _ref[1];
@@ -2961,7 +3933,7 @@ React.forwardRef(function (_ref, ref) {
     }
   };
 
-  var styles = useStyles$b([type, visible]);
+  var styles = useStyles$9([type, visible]);
   React.useEffect(function () {
     window.setTimeout(function () {
       return setVisible(true);
@@ -3067,10 +4039,10 @@ var Modal = function Modal(_ref) {
 
   return React__default.createElement(MuiModal, Object.assign({
     open: open,
-    BackdropComponent: Backdrop$1,
+    BackdropComponent: MUIBackdrop,
     BackdropProps: _extends({}, backdropProps),
     closeAfterTransition: true
-  }, restProps), React__default.createElement(Fade, {
+  }, restProps), React__default.createElement(Fade$1, {
     "in": open
   }, children));
 };
@@ -3148,7 +4120,7 @@ var semanticColors = {
   warning: '#fef1e1',
   error: '#fbd0e0'
 };
-var useStyles$c =
+var useStyles$a =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -3250,7 +4222,7 @@ React.forwardRef(function (_ref, ref) {
       semantic = _ref.semantic,
       showSemanticIcon = _ref.showSemanticIcon,
       MessageIcon = _ref.MessageIcon;
-  var classes = useStyles$c({
+  var classes = useStyles$a({
     semantic: semantic,
     withTitle: !!title
   });
@@ -3290,7 +4262,7 @@ React.forwardRef(function (_ref2, ref) {
       transitionDirection = _ref2.transitionDirection,
       MessageIcon = _ref2.MessageIcon,
       showSemanticIcon = _ref2.showSemanticIcon,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["open", "title", "message", "action", "semantic", "transitionDirection", "MessageIcon", "showSemanticIcon"]);
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["open", "title", "message", "action", "semantic", "transitionDirection", "MessageIcon", "showSemanticIcon", "onExited"]);
 
   return React__default.createElement(MuiSnackbar, Object.assign({
     ref: ref,
@@ -3307,10 +4279,10 @@ React.forwardRef(function (_ref2, ref) {
   }));
 });
 
-var Backdrop =
+var Backdrop$1 =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
-  return React__default.createElement(Backdrop$1, Object.assign({
+  return React__default.createElement(MUIBackdrop, Object.assign({
     ref: ref
   }, props), props.children);
 });
@@ -3474,17 +4446,17 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
     duration: duration,
     position: position,
     width: width
-  }, restProps), children), React__default.createElement(Backdrop, Object.assign({
+  }, restProps), children), React__default.createElement(Backdrop$1, Object.assign({
     open: open,
     onClick: handleClose,
     className: BackdropClassName
   }, restBackdropProps)));
 };
 
-var index$6 = /*#__PURE__*/
+var index$5 = /*#__PURE__*/
 React.memo(SlidingSideMenu);
 
-var useStyles$d =
+var useStyles$b =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -3529,7 +4501,7 @@ styles$5.makeStyles({
 });
 
 var Divider = function Divider(props) {
-  var _useStyles = useStyles$d(props),
+  var _useStyles = useStyles$b(props),
       root = _useStyles.root;
 
   return React__default.createElement(MuiDivider, Object.assign({}, props, {
@@ -4503,7 +5475,7 @@ var QuestionCircleOutline = {
   }
 };
 
-var Facebook$1 = {
+var Facebook = {
   name: 'facebook',
   definition: {
     viewBox: '0 0 512 512',
@@ -4763,17 +5735,17 @@ WordingProvider.useWording = function () {
   return React.useContext(WordingContext);
 };
 
-exports.CssBaseline = CssBaseline;
+exports.CssBaseline = MUICssBaseline;
 Object.defineProperty(exports, 'ThemeContext', {
   enumerable: true,
   get: function () {
-    return core.ThemeContext;
+    return core$1.ThemeContext;
   }
 });
 exports.AnimateHeight = AnimateHeight;
 exports.ArrowRight = ArrowRight;
 exports.Avatar = Avatar;
-exports.Backdrop = Backdrop;
+exports.Backdrop = Backdrop$1;
 exports.BrowserLight = BrowserLight;
 exports.Button = Button$1;
 exports.Card = Card;
@@ -4782,7 +5754,7 @@ exports.CardActions = CardActions;
 exports.CardContent = CardContent;
 exports.CardHeader = CardHeader;
 exports.Checkbox = MuiCheckbox;
-exports.Chip = index$2;
+exports.Chip = index$1;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.EditLight = EditLight;
@@ -4793,31 +5765,31 @@ exports.InputSlider = InputSlider;
 exports.KeyboardDatePicker = KeyboardDatePicker;
 exports.ListUlFilled = ListUl;
 exports.LockFilled = Lock;
-exports.MenuItem = MenuItem;
+exports.MenuItem = MenuItem$1;
 exports.MenuList = MenuList;
 exports.Message = api;
 exports.Modal = Modal;
 exports.MuiThemeProvider = MuiThemeProvider;
-exports.Pagination = index$3;
+exports.Pagination = index$2;
 exports.Paper = Paper;
 exports.Popper = Popper;
 exports.Portal = Portal;
 exports.QuestionCircleOutline = QuestionCircleOutline;
 exports.Radio = MuiRadio;
 exports.RadioGroup = Radio;
-exports.Select = Select;
-exports.SlidingSideMenu = index$6;
+exports.Select = Select$1;
+exports.SlidingSideMenu = index$5;
 exports.Snackbar = Snackbar;
-exports.Step = index$5;
-exports.Stepper = index$4;
-exports.Switch = Switch;
-exports.Tab = Tab;
-exports.Tabs = Tabs;
+exports.Step = index$4;
+exports.Stepper = index$3;
+exports.Switch = Switch$1;
+exports.Tab = Tab$1;
+exports.Tabs = Tabs$1;
 exports.Tag = Tag;
-exports.ToggleButtonGroup = ToggleButtonGroup;
-exports.Tooltip = Tooltip;
+exports.ToggleButtonGroup = ToggleButtonGroup$1;
+exports.Tooltip = Tooltip$1;
 exports.Typography = Typography$1;
-exports.V2 = index$1;
+exports.V2 = index;
 exports.WordingProvider = WordingProvider;
 exports.analyticsLight = AnalyticsLight;
 exports.angleLeftFilled = AngleLeft;
@@ -4851,7 +5823,7 @@ exports.exclamationCircleFilled = ExclamationCircle;
 exports.exclamationCircleOutlined = ExclamationCircle$1;
 exports.exclamationTriangleFilled = ExclamationTriangle;
 exports.externalLinkLight = ExternalLinkLight;
-exports.facebookBrand = Facebook$1;
+exports.facebookBrand = Facebook;
 exports.facebookIn = FacebookIn;
 exports.fileAltOutlined = FileAlt;
 exports.fileCertificateOutlined = FileCertificate;