@surveycake/rc 2.4.0-alpha.12 → 3.0.0-alpha.2

package/dist/rc.cjs.development.js

@@ -1,18 +1,27 @@
 'use strict';
 
+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 React = require('react');
 var React__default = _interopDefault(React);
-var MuiAvatar = _interopDefault(require('@material-ui/core/Avatar'));
+var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
+var emotion = require('emotion');
 var styles$5 = require('@material-ui/core/styles');
-var MuiButton = _interopDefault(require('@material-ui/core/Button'));
+var emotionTheming = require('emotion-theming');
+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 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 MuiAvatar = _interopDefault(require('@material-ui/core/Avatar'));
 var Chip$1 = _interopDefault(require('@material-ui/core/Chip'));
 var colorManipulator = require('@material-ui/core/styles/colorManipulator');
 var MuiPaper = _interopDefault(require('@material-ui/core/Paper'));
 var MuiCard = _interopDefault(require('@material-ui/core/Card'));
-var emotion = require('emotion');
 var MuiCardActionArea = _interopDefault(require('@material-ui/core/CardActionArea'));
 var MuiCardActions = _interopDefault(require('@material-ui/core/CardActions'));
 var MuiCardContent = _interopDefault(require('@material-ui/core/CardContent'));
@@ -32,9 +41,7 @@ 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 SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
 var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
-var Typography$1 = _interopDefault(require('@material-ui/core/Typography'));
 var MuiTabs = _interopDefault(require('@material-ui/core/Tabs'));
 var MuiTab = _interopDefault(require('@material-ui/core/Tab'));
 var RadioGroup = _interopDefault(require('@material-ui/core/RadioGroup'));
@@ -52,6 +59,25 @@ 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 =
+/*#__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"
+  }));
+});
+
+
+
+var index = {
+  __proto__: null,
+  Facebook: Facebook
+};
+
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -94,6 +120,338 @@ 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  "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var theme =
+/*#__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'
+      }
+    },
+    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
+      },
+      caption: {
+        fontSize: '0.875rem',
+        fontWeight: 400,
+        lineHeight: 1.6
+      },
+      overline: {
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: 1.6
+      }
+    }
+  });
+}();
+
+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 useStyles =
+/*#__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
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.secondary.dark,
+        '& .MuiButton-label': {
+          color: theme.palette.common.white
+        }
+      },
+      '&:disabled': {
+        backgroundColor: theme.palette.grey[700],
+        '& > .MuiButton-label': {
+          color: theme.palette.common.white
+        }
+      }
+    },
+    sizeSmall: {
+      padding: '5px 15px',
+      fontSize: theme.typography.button.fontSize
+    },
+    sizeLarge: {
+      padding: '8px 67px',
+      fontSize: theme.typography.body1.fontSize,
+      '@media (min-width:1025px)': {
+        fontSize: '1rem'
+      }
+    }
+  };
+});
+
+var Button =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUIButton, Object.assign({
+    size: "small"
+  }, props, {
+    ref: ref,
+    classes: useStyles()
+  }));
+});
+
+var Typography =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'textPrimary' : _ref$color,
+      rest = _objectWithoutPropertiesLoose(_ref, ["color"]);
+
+  return React__default.createElement(Typography$2, Object.assign({}, rest, {
+    ref: ref,
+    color: color
+  }));
+});
+
+var useStyles$1 =
+/*#__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;
+        }
+      }
+    }
+  };
+});
+
+var Link =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUILink, Object.assign({}, props, {
+    ref: ref,
+    classes: useStyles$1(props)
+  }));
+});
+
+var Icons = {
+  Cancel: Cancel,
+  Info: Info,
+  CheckCircle: CheckCircle$2,
+  Facebook: Facebook
+};
+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
+  }));
+});
+
+
+
+var index$1 = {
+  __proto__: null,
+  CustomSvgIcon: index,
+  theme: theme,
+  ThemeProvider: ThemeProvider,
+  Button: Button,
+  Typography: Typography,
+  Link: Link,
+  Icon: Icon
+};
+
 var getAutoHeightDuration = function getAutoHeightDuration(height) {
   if (!height) {
     return 0;
@@ -201,7 +559,7 @@ var styles = function styles(theme) {
   });
 };
 
-var useStyles =
+var useStyles$2 =
 /*#__PURE__*/
 styles$5.makeStyles(styles);
 var Avatar =
@@ -218,7 +576,7 @@ React.forwardRef(function (_ref, ref) {
       height = _ref.height,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "src", "alt", "size", "variant", "width", "height"]);
 
-  var classes = useStyles({
+  var classes = useStyles$2({
     width: width,
     height: height
   });
@@ -233,7 +591,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var Button =
+var Button$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -248,7 +606,7 @@ React.forwardRef(function (_ref, ref) {
       onClick = _ref.onClick,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "size", "color", "variant", "disabled", "onClick"]);
 
-  return React__default.createElement(MuiButton, Object.assign({
+  return React__default.createElement(MUIButton, Object.assign({
     onClick: onClick,
     color: color,
     disabled: disabled,
@@ -258,7 +616,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var theme = {
+var theme$1 = {
   color: {
     primary: {
       active: '#009A68',
@@ -340,18 +698,16 @@ var CustomBoxShadow1 = "\n0 1px 4px 0 rgba(69, 69, 69, 0.2),\n0 1px 2px 0 rgba(6
 var CustomChip =
 /*#__PURE__*/
 styles$5.styled(function (_ref) {
-  var color = _ref.color,
-      active = _ref.active,
-      other = _objectWithoutPropertiesLoose(_ref, ["color", "active"]);
+  var other = _objectWithoutPropertiesLoose(_ref, ["color", "active"]);
 
   return React__default.createElement(Chip$1, Object.assign({}, other));
 })({
   backgroundColor: function backgroundColor(props) {
-    return props.active ? 'white' : colorManipulator.fade(props.color || theme.color.primary["default"], 0.3);
+    return props.active ? 'white' : colorManipulator.fade(props.color || theme$1.color.primary["default"], 0.3);
   },
   '&:hover, &:focus': {
     backgroundColor: function backgroundColor(props) {
-      return props.active ? 'white' : colorManipulator.fade(props.color || theme.color.primary["default"], 0.3);
+      return props.active ? 'white' : colorManipulator.fade(props.color || theme$1.color.primary["default"], 0.3);
     }
   },
   '&:active': {
@@ -360,7 +716,7 @@ styles$5.styled(function (_ref) {
     }
   },
   color: function color(props) {
-    return props.color || theme.color.primary["default"];
+    return props.color || theme$1.color.primary["default"];
   },
   boxShadow: function boxShadow(props) {
     return props.active ? CustomBoxShadow1 : 'none';
@@ -395,7 +751,7 @@ var Chip = function Chip(_ref) {
   );
 };
 
-var index = /*#__PURE__*/
+var index$2 = /*#__PURE__*/
 React.memo(Chip);
 
 var Paper =
@@ -406,7 +762,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var useStyles$1 =
+var useStyles$3 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -429,7 +785,7 @@ React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "className"]);
 
-  var _useStyles = useStyles$1(restProps),
+  var _useStyles = useStyles$3(restProps),
       root = _useStyles.root;
 
   return React__default.createElement(MuiCard, Object.assign({
@@ -456,10 +812,10 @@ function _templateObject2() {
   return data;
 }
 
-function _templateObject() {
+function _templateObject$1() {
   var data = _taggedTemplateLiteralLoose(["\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n"]);
 
-  _templateObject = function _templateObject() {
+  _templateObject$1 = function _templateObject() {
     return data;
   };
 
@@ -469,7 +825,7 @@ var loadingCircle =
 /*#__PURE__*/
 emotion.keyframes(
 /*#__PURE__*/
-_templateObject());
+_templateObject$1());
 var spin =
 /*#__PURE__*/
 emotion.css(
@@ -482,11 +838,10 @@ var svgBaseProps = (_svgBaseProps = {
   height: '1em',
   fill: 'currentColor'
 }, _svgBaseProps['aria-hidden'] = true, _svgBaseProps.focusable = 'false', _svgBaseProps);
-var Icon =
+var Icon$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
       icon = _ref.icon,
       viewBox = _ref.viewBox,
       style = _ref.style,
@@ -525,7 +880,7 @@ React.forwardRef(function (_ref, ref) {
     d: icon.definition.pathData
   }));
 });
-Icon.defaultProps = {
+Icon$1.defaultProps = {
   size: 1
 };
 
@@ -547,10 +902,10 @@ function _templateObject2$1() {
   return data;
 }
 
-function _templateObject$1() {
+function _templateObject$2() {
   var data = _taggedTemplateLiteralLoose(["\n  position: relative;\n"]);
 
-  _templateObject$1 = function _templateObject() {
+  _templateObject$2 = function _templateObject() {
     return data;
   };
 
@@ -560,12 +915,12 @@ var DatePickerWrapper =
 /*#__PURE__*/
 styled('section')(
 /*#__PURE__*/
-_templateObject$1());
+_templateObject$2());
 var IonwWrapper =
 /*#__PURE__*/
 styled('section')(
 /*#__PURE__*/
-_templateObject2$1(), theme.color.primary["default"]);
+_templateObject2$1(), theme$1.color.primary["default"]);
 var popOverStyles =
 /*#__PURE__*/
 styles$5.createStyles({
@@ -636,7 +991,7 @@ var DatePicker = function DatePicker(_ref) {
       root: inputClasses.root
     }
   };
-  return React__default.createElement(DatePickerWrapper, null, React__default.createElement(IonwWrapper, null, React__default.createElement(Icon, {
+  return React__default.createElement(DatePickerWrapper, null, React__default.createElement(IonwWrapper, null, React__default.createElement(Icon$1, {
     icon: CalendarAlt
   })), React__default.createElement(StyledMuiDatePicker, Object.assign({
     value: value,
@@ -652,8 +1007,8 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 function useTheme() {
-  var theme$1 = React.useContext(core.ThemeContext);
-  return theme$1 && theme$1.color ? theme$1 : theme;
+  var theme = React.useContext(core.ThemeContext);
+  return theme && theme.color ? theme : theme$1;
 }
 function makeStyles(styles) {
   var memoizedClasses = {};
@@ -712,7 +1067,7 @@ function resolveThemeColorProp(theme, color) {
   return typeof color === 'function' ? color(theme) : resolveThemeColorByPath(theme, color);
 }
 
-var useStyles$2 =
+var useStyles$4 =
 /*#__PURE__*/
 makeStyles([['typography', function (theme, _ref) {
   var variant = _ref[0],
@@ -728,7 +1083,7 @@ makeStyles([['typography', function (theme, _ref) {
   return ["\n\t\t\t\tcolor: " + (resolveThemeColorProp(theme, color) || 'inherit') + ";\n\t\t\t\tfont-weight: " + fontWeight + ";\n\t\t\t\tfont-size: " + fontSize + "px;\n\t\t\t\tline-height: " + lineHeight + "px;\n\t\t\t\tmin-height: 0.01px;\n\t\t\t\tmargin: 0;\n\t\t\t\tmargin-bottom: " + (gutterBottom ? '0.35em' : 0) + ";\n\t\t\t", noWrap && "\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t"];
 }]]);
 
-var Typography =
+var Typography$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -740,13 +1095,13 @@ React.forwardRef(function (_ref, ref) {
       noWrap = _ref.noWrap,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant", "color", "weight", "gutterBottom", "noWrap"]);
 
-  var styles = useStyles$2([Vari, color, weight, gutterBottom, noWrap]);
+  var styles = useStyles$4([Vari, color, weight, gutterBottom, noWrap]);
   return React__default.createElement(Vari, Object.assign({}, props, {
     className: className ? emotion.cx(styles.typography, className) : styles.typography,
     ref: ref
   }), children);
 });
-Typography.defaultProps = {
+Typography$1.defaultProps = {
   weight: 'normal',
   gutterBottom: false,
   noWrap: false
@@ -800,7 +1155,7 @@ styles$5.makeStyles(inputAdornmentStyles);
 var CommonKeyboardDatePickerProps = {
   keyboardIcon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: CalendarAlt
   }),
   maxDateMessage: null,
@@ -819,7 +1174,7 @@ var CommonKeyboardDatePickerProps = {
 
 var InvalidDateMsg = function InvalidDateMsg(_ref) {
   var msg = _ref.msg;
-  return React__default.createElement(Typography, {
+  return React__default.createElement(Typography$1, {
     variant: 'span',
     color: 'error'
   }, msg);
@@ -905,7 +1260,7 @@ function hexToRgba(originColor, opacity) {
   return "rgba(" + rgb + ", " + opacity + ")";
 }
 
-var useStyles$3 =
+var useStyles$5 =
 /*#__PURE__*/
 makeStyles([['tag', function (theme, _ref) {
   var originColor = _ref[0],
@@ -923,7 +1278,7 @@ var Tag = function Tag(_ref) {
       onClick = _ref.onClick,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "color", "variant", "onClick"]);
 
-  var styles = useStyles$3([color, variant, !!onClick]);
+  var styles = useStyles$5([color, variant, !!onClick]);
   return React__default.createElement("div", Object.assign({}, props, {
     className: className ? emotion.cx(styles.tag, className) : styles.tag,
     onClick: onClick
@@ -957,7 +1312,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$4 =
+var useStyles$6 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1066,13 +1421,11 @@ var Select = function Select(props) {
       multiple = _props$multiple === void 0 ? false : _props$multiple,
       onOpen = props.onOpen,
       onClose = props.onClose,
-      height = props.height,
-      backgroundColor = props.backgroundColor,
       _props$isVarItem = props.isVarItem,
       isVarItem = _props$isVarItem === void 0 ? false : _props$isVarItem,
       restProps = _objectWithoutPropertiesLoose(props, ["options", "value", "onChange", "variant", "multiple", "onOpen", "onClose", "height", "backgroundColor", "isVarItem"]);
 
-  var classes = useStyles$4(props);
+  var classes = useStyles$6(props);
   var itemClasses = itemStyle(props);
   return React__default.createElement(MuiSelect, Object.assign({
     className: classes.root,
@@ -1279,10 +1632,10 @@ function _templateObject2$2() {
   return data;
 }
 
-function _templateObject$2() {
+function _templateObject$3() {
   var data = _taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 0;\n  visibility: hidden;\n  outline: none;\n  position: absolute;\n  left: 50%;\n  top: 12%;\n"]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -1292,13 +1645,13 @@ var InputStyle =
 /*#__PURE__*/
 styled('input')(
 /*#__PURE__*/
-_templateObject$2());
+_templateObject$3());
 var LabelStyle =
 /*#__PURE__*/
 styled('label')(
 /*#__PURE__*/
 _templateObject2$2(), function (props) {
-  return props.checked ? theme.color.primary["default"] : theme.color.text.F;
+  return props.checked ? theme$1.color.primary["default"] : theme$1.color.text.F;
 });
 var ThumbStyle =
 /*#__PURE__*/
@@ -1313,12 +1666,12 @@ var CheckedNode =
 /*#__PURE__*/
 styled('span')(
 /*#__PURE__*/
-_templateObject4(), theme.typography.fontWeight.normal);
+_templateObject4(), theme$1.typography.fontWeight.normal);
 var UnCheckedNode =
 /*#__PURE__*/
 styled('span')(
 /*#__PURE__*/
-_templateObject5(), theme.color.text.B3, theme.typography.fontWeight.normal);
+_templateObject5(), theme$1.color.text.B3, theme$1.typography.fontWeight.normal);
 
 var Switch =
 /*#__PURE__*/
@@ -1398,7 +1751,7 @@ var MenuList = function MenuList(_ref) {
   });
 };
 
-var useStyles$5 =
+var useStyles$7 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1421,13 +1774,9 @@ styles$5.makeStyles({
 
 var MenuItem = function MenuItem(props) {
   var children = props.children,
-      backgroundColor = props.backgroundColor,
-      color = props.color,
-      hoverBackgroundColor = props.hoverBackgroundColor,
-      hoverColor = props.hoverColor,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "backgroundColor", "color", "hoverBackgroundColor", "hoverColor"]);
 
-  var classes = useStyles$5(props);
+  var classes = useStyles$7(props);
   return React__default.createElement(MuiMenuItem, Object.assign({}, restProps, {
     className: classes.root
   }), children);
@@ -1651,9 +2000,9 @@ var Pagination = function Pagination(_ref) {
   }), React__default.createElement(Box, {
     pr: 0.5,
     pl: 1
-  }, React__default.createElement(Typography$1, {
+  }, React__default.createElement(Typography$2, {
     variant: "body1"
-  }, "\uFF0F")), React__default.createElement(Typography$1, {
+  }, "\uFF0F")), React__default.createElement(Typography$2, {
     variant: "body1"
   }, totalPages)), React__default.createElement(ChevronRightIconButton, {
     disabled: !hasNext,
@@ -1664,10 +2013,10 @@ var Pagination = function Pagination(_ref) {
   }));
 };
 
-var index$1 = /*#__PURE__*/
+var index$3 = /*#__PURE__*/
 React.memo(Pagination);
 
-var useStyles$6 =
+var useStyles$8 =
 /*#__PURE__*/
 styles$5.makeStyles({
   scrollButtons: {
@@ -1678,7 +2027,7 @@ styles$5.makeStyles({
       margin: '0 12px'
     },
     '& > *:focus': {
-      color: theme.color.text.B5
+      color: theme$1.color.text.B5
     },
     '& > :first-child': {
       marginLeft: 0
@@ -1697,7 +2046,7 @@ React.forwardRef(function (_ref, ref) {
       onChange = _ref.onChange,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "value", "onChange"]);
 
-  var classes = useStyles$6();
+  var classes = useStyles$8();
   return React__default.createElement(MuiTabs, Object.assign({
     ref: ref,
     value: value,
@@ -1708,29 +2057,29 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$7 =
+var useStyles$9 =
 /*#__PURE__*/
-styles$5.makeStyles(function (theme$1) {
+styles$5.makeStyles(function (theme) {
   return styles$5.createStyles({
     root: {
       textTransform: 'none',
       minWidth: 56,
       padding: '15px 0',
-      color: theme.color.text.B5,
+      color: theme$1.color.text.B5,
       opacity: 1,
       '&:hover': {
-        color: theme.color.text.B4,
+        color: theme$1.color.text.B4,
         opacity: 1
       },
       '&$selected': {
-        color: theme.color.primary["default"]
+        color: theme$1.color.primary["default"]
       }
     },
     selected: {},
     wrapper: _extends({
       height: 32
-    }, theme$1.typography.body1, {
-      fontWeight: theme.typography.fontWeight.medium
+    }, theme.typography.body1, {
+      fontWeight: theme$1.typography.fontWeight.medium
     })
   });
 });
@@ -1744,7 +2093,7 @@ React.forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "icon", "value"]);
 
-  var classes = useStyles$7();
+  var classes = useStyles$9();
   return React__default.createElement(MuiTab, Object.assign({
     ref: ref,
     classes: classes,
@@ -1772,7 +2121,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$8 =
+var useStyles$a =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1784,27 +2133,27 @@ styles$5.makeStyles({
     borderRadius: '50%',
     width: 20,
     height: 20,
-    boxShadow: "inset 0 0 0 2px " + theme.color.text.B5,
+    boxShadow: "inset 0 0 0 2px " + theme$1.color.text.B5,
     backgroundColor: 'transparent',
     '$root.Mui-focusVisible &': {
-      boxShadow: "inset 0 0 0 2px " + theme.color.primary["default"],
+      boxShadow: "inset 0 0 0 2px " + theme$1.color.primary["default"],
       backgroundColor: 'transparent'
     },
     'input:hover ~ &': {
       padding: 0,
-      boxShadow: "inset 0 0 0 1px " + theme.color.primary["default"]
+      boxShadow: "inset 0 0 0 1px " + theme$1.color.primary["default"]
     },
     'input:disabled ~ &': {
-      boxShadow: "inset 0 0 0 2px " + theme.color.text.B3,
+      boxShadow: "inset 0 0 0 2px " + theme$1.color.text.B3,
       backgroundColor: 'transparent'
     }
   },
   checkedIcon: {
     borderRadius: '50%',
     backgroundColor: 'transparent',
-    boxShadow: "inset 0 0 0 6px " + theme.color.primary["default"],
+    boxShadow: "inset 0 0 0 6px " + theme$1.color.primary["default"],
     'input:hover ~ &': {
-      boxShadow: "inset 0 0 0 5px " + theme.color.primary["default"],
+      boxShadow: "inset 0 0 0 5px " + theme$1.color.primary["default"],
       backgroundColor: 'transparent'
     }
   }
@@ -1815,10 +2164,9 @@ React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
       checked = _ref.checked,
       value = _ref.value,
-      classes = _ref.classes,
       restProps = _objectWithoutPropertiesLoose(_ref, ["disabled", "checked", "value", "classes"]);
 
-  var css = useStyles$8();
+  var css = useStyles$a();
   return React__default.createElement(Radio$1, Object.assign({
     ref: ref,
     value: value,
@@ -1843,7 +2191,6 @@ React.forwardRef(function (_ref, ref) {
       color = _ref.color,
       checked = _ref.checked,
       value = _ref.value,
-      classes = _ref.classes,
       restProps = _objectWithoutPropertiesLoose(_ref, ["disabled", "color", "checked", "value", "classes"]);
 
   return React__default.createElement(Checkbox, Object.assign({
@@ -1875,10 +2222,10 @@ function _templateObject2$3() {
   return data;
 }
 
-function _templateObject$3() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -1888,12 +2235,12 @@ var StepperContainer =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$3());
+_templateObject$4());
 var ConnectorContainer =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject2$3(), theme.color.text.B3);
+_templateObject2$3(), theme$1.color.text.B3);
 
 var Stepper =
 /*#__PURE__*/
@@ -1916,7 +2263,7 @@ React.forwardRef(function (_ref, ref) {
       var Connector = React__default.createElement("div", {
         key: idx + "_connector",
         className: ConnectorContainer
-      }, React__default.createElement(Icon, {
+      }, React__default.createElement(Icon$1, {
         icon: LongArrowRight
       }));
       return [].concat(acc, [newStep, Connector]);
@@ -1927,13 +2274,13 @@ React.forwardRef(function (_ref, ref) {
     className: StepperContainer
   }, restProps), stepsWithConnector);
 });
-var index$2 = /*#__PURE__*/
+var index$4 = /*#__PURE__*/
 React.memo(Stepper);
 
-function _templateObject$4() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  color: ", ";\n  background-color: transparent;\n  min-width: 56px;\n  padding: 16px 0;\n  border: none;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: 22px;\n  outline: none;\n\n  &:hover {\n    color: ", ";\n  }\n"]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -1943,14 +2290,14 @@ var SytledStep =
 /*#__PURE__*/
 styled('button')(
 /*#__PURE__*/
-_templateObject$4(), function (props) {
+_templateObject$5(), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, function (props) {
-  return props.active ? theme.color.text.B6 : theme.color.text.B3;
-}, theme.typography.fontSize.span, function (props) {
-  return props.active ? theme.typography.fontWeight.medium : theme.typography.fontWeight.normal;
+  return props.active ? theme$1.color.text.B6 : theme$1.color.text.B3;
+}, theme$1.typography.fontSize.span, function (props) {
+  return props.active ? theme$1.typography.fontWeight.medium : theme$1.typography.fontWeight.normal;
 }, function (props) {
-  return props.active ? theme.color.text.B6 : theme.color.text.B4;
+  return props.active ? theme$1.color.text.B6 : theme$1.color.text.B4;
 });
 
 var Step =
@@ -1977,13 +2324,13 @@ React.forwardRef(function (_ref, ref) {
     active: active
   }, restProps), children);
 });
-var index$3 = /*#__PURE__*/
+var index$5 = /*#__PURE__*/
 React.memo(Step);
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteralLoose(["\n\ttable, th, td {\n\t\tborder: 1px solid #eeeeee;\n\t}\n\n  table {\n    width: 100%;\n\t\tborder-collapse: collapse;\n\t\ttable-layout:fixed;\n\t}\n\n  thead {\n\t\ttr th {\n\t\t\theight: 56px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\ttext-align: center;\n\t\t\tcolor: #3dba90;\n\n\t\t\t&:#title {\n\t\t\t\twidth: 20%;\n\t\t\t}\n\n\t\t\t&#origin {\n\t\t\t\twidth: 40%;\n\t\t\t}\n\n\t\t\t&#translate {\n\t\t\t\twidth: 40%;\n\t\t\t}\n\t\t}\n\t}\n\n\ttbody {\n\t\ttr td {\n\t\t\tword-break:break-word;\n\t\t\tvertical-align:top;\n\t\t}\n\t}\n"]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -1993,7 +2340,7 @@ var StyledEditableTable =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$5());
+_templateObject$6());
 
 var EditableTable = function EditableTable(_ref) {
   var rows = _ref.rows,
@@ -2558,19 +2905,18 @@ var ExclamationCircle = {
 
 
 
-var icons = ({
+var icons = {
   __proto__: null,
   error: TimesCircle,
   info: InfoCircle,
   success: CheckCircle,
   warning: ExclamationCircle
-});
+};
 
-var useStyles$9 =
+var useStyles$b =
 /*#__PURE__*/
 makeStyles([['message', function (theme, _ref) {
-  var _ = _ref[0],
-      visible = _ref[1];
+  var visible = _ref[1];
   return ["\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tposition: fixed;\n\t\t\ttop: 0;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -200%);\n\t\t\toverflow: hidden;\n\t\t\tmargin-top: 20px;\n\t\t\tborder-radius: 4px;\n\t\t\tpadding: 10px 16px;\n\t\t\tbox-shadow: 0 0 8px 0 rgba(69, 69, 69, 0.5);\n\t\t\tbackground-color: " + theme.color.text.white + ";\n\t\t\ttransition: transform 200ms ease-out;\n\t\t\tz-index: 2000;\n\t\t", visible && "\n\t\t\ttransform: translate(-50%, 0);\n\t\t"];
 }], ['icon', function (theme, _ref2) {
   var type = _ref2[0];
@@ -2615,7 +2961,7 @@ React.forwardRef(function (_ref, ref) {
     }
   };
 
-  var styles = useStyles$9([type, visible]);
+  var styles = useStyles$b([type, visible]);
   React.useEffect(function () {
     window.setTimeout(function () {
       return setVisible(true);
@@ -2639,7 +2985,7 @@ React.forwardRef(function (_ref, ref) {
   return React__default.createElement("div", {
     className: styles.message,
     onTransitionEnd: onTransitionEnd
-  }, React__default.createElement(Icon, {
+  }, React__default.createElement(Icon$1, {
     className: styles.icon,
     icon: icons[type]
   }), React__default.createElement("div", {
@@ -2786,10 +3132,10 @@ function _templateObject2$4() {
   return data;
 }
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n"]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -2802,7 +3148,7 @@ var semanticColors = {
   warning: '#fef1e1',
   error: '#fbd0e0'
 };
-var useStyles$a =
+var useStyles$c =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -2820,7 +3166,7 @@ var MessageWrapper =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$6());
+_templateObject$7());
 var MessageContent =
 /*#__PURE__*/
 emotion.css(
@@ -2869,28 +3215,28 @@ var transitionMap = (_transitionMap = {}, _transitionMap[Direction.LEFT] = Trans
 var semanticIcon = (_semanticIcon = {}, _semanticIcon[Semantic.WARNING] = {
   icon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: ExclamationTriangle
   }),
   color: '#F3973E'
 }, _semanticIcon[Semantic.INFO] = {
   icon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: InfoCircle
   }),
   color: '#4DBAE9'
 }, _semanticIcon[Semantic.SUCCESS] = {
   icon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: CheckCircle
   }),
   color: '#A0D45E'
 }, _semanticIcon[Semantic.ERROR] = {
   icon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: TimesCircle
   }),
   color: '#EC3C63'
@@ -2904,7 +3250,7 @@ React.forwardRef(function (_ref, ref) {
       semantic = _ref.semantic,
       showSemanticIcon = _ref.showSemanticIcon,
       MessageIcon = _ref.MessageIcon;
-  var classes = useStyles$a({
+  var classes = useStyles$c({
     semantic: semantic,
     withTitle: !!title
   });
@@ -2920,12 +3266,12 @@ React.forwardRef(function (_ref, ref) {
       color: iconColor
     }, MessageIcon), React__default.createElement("div", {
       className: MessageContent
-    }, title && React__default.createElement(Typography, {
+    }, title && React__default.createElement(Typography$1, {
       variant: "h6",
       weight: "medium",
       color: "text.B6",
       className: TitleStyle
-    }, title), React__default.createElement(Typography, {
+    }, title), React__default.createElement(Typography$1, {
       variant: "p",
       color: "text.B6"
     }, message))),
@@ -2969,7 +3315,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var Link = {
+var Link$1 = {
   name: 'list-ul-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -2997,10 +3343,10 @@ function _templateObject2$5() {
   return data;
 }
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteralLoose(["\n  background-color: white;\n  transition: transform ", ";\n  transform: translateX(", ");\n  position: fixed;\n  ", ";\n  bottom: 0;\n  top: 0;\n  min-width: ", "px;\n  height: 100%;\n  z-index: ", ";\n"]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -3062,7 +3408,7 @@ var StyledSideMenu =
 /*#__PURE__*/
 styled.section(
 /*#__PURE__*/
-_templateObject$7(), duration, translateOffset, position, width, theme.zIndex.appBar);
+_templateObject$8(), duration, translateOffset, position, width, theme$1.zIndex.appBar);
 var StyledIconWrapper =
 /*#__PURE__*/
 styled.div(
@@ -3072,7 +3418,7 @@ var IconStyle =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject3$2(), theme.color.primary["default"]);
+_templateObject3$2(), theme$1.color.primary["default"]);
 
 var SlidingSideMenu = function SlidingSideMenu(_ref) {
   var children = _ref.children,
@@ -3120,8 +3466,8 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
     onClick: handleIconClick
   }, icon) : React__default.createElement(StyledIconWrapper, {
     onClick: handleIconClick
-  }, React__default.createElement(Icon, Object.assign({
-    icon: Link,
+  }, React__default.createElement(Icon$1, Object.assign({
+    icon: Link$1,
     className: emotion.cx(IconStyle, IconClassName)
   }, restIconProps))), React__default.createElement(StyledSideMenu, Object.assign({
     open: open,
@@ -3135,10 +3481,10 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
   }, restBackdropProps)));
 };
 
-var index$4 = /*#__PURE__*/
+var index$6 = /*#__PURE__*/
 React.memo(SlidingSideMenu);
 
-var useStyles$b =
+var useStyles$d =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -3183,7 +3529,7 @@ styles$5.makeStyles({
 });
 
 var Divider = function Divider(props) {
-  var _useStyles = useStyles$b(props),
+  var _useStyles = useStyles$d(props),
       root = _useStyles.root;
 
   return React__default.createElement(MuiDivider, Object.assign({}, props, {
@@ -3193,10 +3539,10 @@ var Divider = function Divider(props) {
 
 var boxShadowForMenu = "0 1px 6px 0 rgba(69, 69, 69, 0.2),\n0 1px 5px 0 rgba(69, 69, 69, 0.1)";
 
-function _templateObject$8() {
+function _templateObject$9() {
   var data = _taggedTemplateLiteralLoose(["\n    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700|Roboto:400,500,700&display=swap&subset=chinese-traditional');\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
   };
 
@@ -3216,39 +3562,45 @@ var muiThemeForSurveyCake =
 /*#__PURE__*/
 function () {
   // Side Effects
-  emotion.injectGlobal(_templateObject$8());
+  emotion.injectGlobal(_templateObject$9());
   var BASE_FONT_SIZE = 16;
-  return styles$5.createMuiTheme({
+  return styles$5.createTheme({
     typography: {
       fontFamily: ['Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', 'Noto Sans TC', 'Apple LiGothic', '微軟正黑體', 'Microsoft JhengHei', 'sans-serif', 'PingFangTC-Regular'].join(','),
       htmlFontSize: BASE_FONT_SIZE,
       h1: {
-        fontSize: theme.typography.fontSize.h1 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h1 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 44 / BASE_FONT_SIZE + "rem"
       },
       h2: {
-        fontSize: theme.typography.fontSize.h2 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h2 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 40 / BASE_FONT_SIZE + "rem"
       },
       h3: {
-        fontSize: theme.typography.fontSize.h3 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h3 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 36 / BASE_FONT_SIZE + "rem"
       },
       h4: {
-        fontSize: theme.typography.fontSize.h4 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h4 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 32 / BASE_FONT_SIZE + "rem"
       },
       h5: {
-        fontSize: theme.typography.fontSize.h5 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h5 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 28 / BASE_FONT_SIZE + "rem"
       },
       h6: {
-        fontSize: theme.typography.fontSize.h6 / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.h6 / BASE_FONT_SIZE + "rem",
+        fontWeight: 500,
         lineHeight: 24 / BASE_FONT_SIZE + "rem"
       },
       body1: {
         fontFamily: 'PingFangTC-Regular',
-        fontSize: theme.typography.fontSize.p / BASE_FONT_SIZE + "rem",
+        fontSize: theme$1.typography.fontSize.p / BASE_FONT_SIZE + "rem",
         lineHeight: 22 / BASE_FONT_SIZE + "rem"
       },
       body2: {
@@ -3270,30 +3622,29 @@ function () {
     },
     palette: {
       primary: {
-        light: theme.color.primary.hover,
-        main: theme.color.primary["default"],
-        dark: theme.color.primary.active,
+        light: theme$1.color.primary.hover,
+        main: theme$1.color.primary["default"],
+        dark: theme$1.color.primary.active,
         contrastText: '#ffffff'
       },
       secondary: {
-        light: theme.color.secondary.hover,
-        main: theme.color.secondary["default"],
-        dark: theme.color.secondary.active,
+        light: theme$1.color.secondary.hover,
+        main: theme$1.color.secondary["default"],
+        dark: theme$1.color.secondary.active,
         contrastText: '#ffffff'
       },
       action: {
         hoverOpacity: 0.25
       },
       error: {
-        main: theme.color.semantic.error
+        main: theme$1.color.semantic.error
       }
     },
     props: {
       // Name of the component ⚛️
       MuiButtonBase: {
         // The default props to change
-        disableRipple: true // No more ripple, on the whole application 💣!
-
+        disableRipple: true
       },
       MuiSelect: {
         MenuProps: {
@@ -3320,25 +3671,29 @@ function () {
       MuiButton: {
         root: {
           minWidth: 'none',
-          color: theme.color.text.B3,
+          padding: '7px 20px',
+          color: theme$1.color.text.B3,
+          fontWeight: 400,
+          fontSize: 14 / BASE_FONT_SIZE + "rem",
+          lineHeight: 22 / BASE_FONT_SIZE + "rem",
           '&:hover': {
-            backgroundColor: theme.color.text.HB
+            backgroundColor: theme$1.color.text.HB
           },
           '&:disabled': {
-            color: theme.color.text.B2,
-            backgroundColor: theme.color.text.F
+            color: theme$1.color.text.B2,
+            backgroundColor: theme$1.color.text.F
           }
         },
         // Name of the rule
         contained: {
           // Some CSS
-          backgroundColor: theme.color.text.HB,
-          color: theme.color.text.B4,
+          backgroundColor: theme$1.color.text.HB,
+          color: theme$1.color.text.B4,
           boxShadow: 'none',
           '&:hover': {
             boxShadow: 'none',
-            backgroundColor: theme.color.text.HB,
-            color: theme.color.text.B5
+            backgroundColor: theme$1.color.text.HB,
+            color: theme$1.color.text.B5
           },
           '&:active': {
             boxShadow: 'none'
@@ -3347,26 +3702,49 @@ function () {
             boxShadow: 'none'
           }
         },
-        outlinedPrimary: {
-          borderColor: theme.color.primary["default"]
-        },
         containedPrimary: {
           '&:disabled': {
-            color: theme.color.text.white
+            color: theme$1.color.text.white
           },
           '&:hover': {
             boxShadow: 'none',
-            color: theme.color.text.white
+            color: theme$1.color.text.white
           }
         },
         containedSecondary: {
           '&:disabled': {
-            color: theme.color.text.white
+            color: theme$1.color.text.white
           },
           '&:hover': {
             boxShadow: 'none',
-            color: theme.color.text.white
+            color: theme$1.color.text.white
           }
+        },
+        containedSizeSmall: {
+          padding: '5px 16px',
+          fontSize: 14 / BASE_FONT_SIZE + "rem",
+          lineHeight: 22 / BASE_FONT_SIZE + "rem"
+        },
+        containedSizeLarge: {
+          padding: '8px 24px',
+          fontSize: 16 / BASE_FONT_SIZE + "rem",
+          lineHeight: 24 / BASE_FONT_SIZE + "rem"
+        },
+        outlined: {
+          padding: '7px 20px'
+        },
+        outlinedPrimary: {
+          borderColor: theme$1.color.primary["default"]
+        },
+        outlinedSizeSmall: {
+          padding: '5px 16px',
+          fontSize: 14 / BASE_FONT_SIZE + "rem",
+          lineHeight: 22 / BASE_FONT_SIZE + "rem"
+        },
+        outlinedSizeLarge: {
+          padding: '8px 24px',
+          fontSize: 16 / BASE_FONT_SIZE + "rem",
+          lineHeight: 24 / BASE_FONT_SIZE + "rem"
         }
       },
       MuiChip: {
@@ -3414,17 +3792,17 @@ function () {
         root: {
           borderRadius: '0',
           '&$selected': {
-            backgroundColor: theme.color.primary.lightBackground,
-            color: theme.color.primary["default"],
+            backgroundColor: theme$1.color.primary.lightBackground,
+            color: theme$1.color.primary["default"],
             '&:hover': {
-              backgroundColor: theme.color.primary.lightBackground
+              backgroundColor: theme$1.color.primary.lightBackground
             }
           }
         },
         button: {
           '&:hover': {
             backgroundColor: 'white',
-            color: theme.color.primary["default"]
+            color: theme$1.color.primary["default"]
           }
         }
       },
@@ -3461,11 +3839,11 @@ function () {
       MuiOutlinedInput: {
         root: {
           '&:hover $notchedOutline': {
-            borderColor: theme.color.primary["default"]
+            borderColor: theme$1.color.primary["default"]
           },
           '&$focused $notchedOutline': {
             borderWidth: '1px',
-            boxShadow: "0 0 2px 0 " + theme.color.primary["default"]
+            boxShadow: "0 0 2px 0 " + theme$1.color.primary["default"]
           }
         },
         input: {
@@ -3494,17 +3872,17 @@ function () {
       },
       MuiTooltip: {
         tooltip: {
-          backgroundColor: theme.color.text.B6,
-          fontSize: theme.typography.fontSize.span
+          backgroundColor: theme$1.color.text.B6,
+          fontSize: theme$1.typography.fontSize.span
         },
         arrow: {
-          color: theme.color.text.B6
+          color: theme$1.color.text.B6
         }
       },
       MuiCardHeader: {
         root: {
           padding: '13px 24px',
-          backgroundColor: theme.color.primary["default"]
+          backgroundColor: theme$1.color.primary["default"]
         }
       },
       MuiCardContent: {
@@ -3516,7 +3894,7 @@ function () {
         root: {
           padding: '13px 24px',
           backgroundColor: '#fafafa',
-          borderTop: "1px solid " + theme.color.text.HB
+          borderTop: "1px solid " + theme$1.color.text.HB
         }
       },
       MuiSnackbarContent: {
@@ -3527,7 +3905,7 @@ function () {
       },
       MuiTabs: {
         indicator: {
-          backgroundColor: theme.color.primary["default"]
+          backgroundColor: theme$1.color.primary["default"]
         }
       }
     }
@@ -4021,7 +4399,7 @@ var AngleRight$1 = {
   }
 };
 
-var Link$1 = {
+var Link$2 = {
   name: 'link-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -4125,7 +4503,7 @@ var QuestionCircleOutline = {
   }
 };
 
-var Facebook = {
+var Facebook$1 = {
   name: 'facebook',
   definition: {
     viewBox: '0 0 512 512',
@@ -4264,11 +4642,11 @@ var dashboard = {
 
 
 
-var enWording = ({
+var enWording = {
   __proto__: null,
   pricing: pricing,
   dashboard: dashboard
-});
+};
 
 var pricing$1 = {
   title: '選擇方案',
@@ -4361,11 +4739,11 @@ var dashboard$1 = {
 
 
 
-var twWording = ({
+var twWording = {
   __proto__: null,
   pricing: pricing$1,
   dashboard: dashboard$1
-});
+};
 
 // TODO: Move to wording repo
 var WordingContext =
@@ -4397,20 +4775,20 @@ exports.ArrowRight = ArrowRight;
 exports.Avatar = Avatar;
 exports.Backdrop = Backdrop;
 exports.BrowserLight = BrowserLight;
-exports.Button = Button;
+exports.Button = Button$1;
 exports.Card = Card;
 exports.CardActionArea = CardActionArea;
 exports.CardActions = CardActions;
 exports.CardContent = CardContent;
 exports.CardHeader = CardHeader;
 exports.Checkbox = MuiCheckbox;
-exports.Chip = index;
+exports.Chip = index$2;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.EditLight = EditLight;
 exports.EditableTable = EditableTable;
 exports.GroupSelect = GroupSelect;
-exports.Icon = Icon;
+exports.Icon = Icon$1;
 exports.InputSlider = InputSlider;
 exports.KeyboardDatePicker = KeyboardDatePicker;
 exports.ListUlFilled = ListUl;
@@ -4420,7 +4798,7 @@ exports.MenuList = MenuList;
 exports.Message = api;
 exports.Modal = Modal;
 exports.MuiThemeProvider = MuiThemeProvider;
-exports.Pagination = index$1;
+exports.Pagination = index$3;
 exports.Paper = Paper;
 exports.Popper = Popper;
 exports.Portal = Portal;
@@ -4428,17 +4806,18 @@ exports.QuestionCircleOutline = QuestionCircleOutline;
 exports.Radio = MuiRadio;
 exports.RadioGroup = Radio;
 exports.Select = Select;
-exports.SlidingSideMenu = index$4;
+exports.SlidingSideMenu = index$6;
 exports.Snackbar = Snackbar;
-exports.Step = index$3;
-exports.Stepper = index$2;
+exports.Step = index$5;
+exports.Stepper = index$4;
 exports.Switch = Switch;
 exports.Tab = Tab;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
-exports.Typography = Typography;
+exports.Typography = Typography$1;
+exports.V2 = index$1;
 exports.WordingProvider = WordingProvider;
 exports.analyticsLight = AnalyticsLight;
 exports.angleLeftFilled = AngleLeft;
@@ -4465,14 +4844,14 @@ exports.clockOutlined = Clock;
 exports.codeOutlined = Code;
 exports.cogLight = CogLight;
 exports.commentAltLinesOutlined = CommentAltLines;
-exports.defaultTheme = theme;
+exports.defaultTheme = theme$1;
 exports.ellipsisHFilled = EllipsisH;
 exports.ellipsisVFilled = EllipsisV;
 exports.exclamationCircleFilled = ExclamationCircle;
 exports.exclamationCircleOutlined = ExclamationCircle$1;
 exports.exclamationTriangleFilled = ExclamationTriangle;
 exports.externalLinkLight = ExternalLinkLight;
-exports.facebookBrand = Facebook;
+exports.facebookBrand = Facebook$1;
 exports.facebookIn = FacebookIn;
 exports.fileAltOutlined = FileAlt;
 exports.fileCertificateOutlined = FileCertificate;
@@ -4486,10 +4865,10 @@ exports.hexToRgba = hexToRgba;
 exports.infoCircleFilled = InfoCircle;
 exports.infoCircleOutlined = InfoCircle$1;
 exports.linkLight = LinkLight;
-exports.linkOutlined = Link$1;
+exports.linkOutlined = Link$2;
 exports.linkedinBrand = Linkedin;
 exports.linkedinIn = LinkedinIn;
-exports.listUlOutlined = Link;
+exports.listUlOutlined = Link$1;
 exports.longArrowRightOutlined = LongArrowRight;
 exports.makeStyles = makeStyles;
 exports.minusLightFilled = MinusLight;