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

package/dist/rc.esm.js

@@ -1,13 +1,20 @@
 export { default as CssBaseline } from '@material-ui/core/CssBaseline';
-import React, { useRef, useEffect, forwardRef, memo, useContext, useMemo, useState, useCallback, Children, isValidElement, cloneElement, useImperativeHandle, createRef, createContext } from 'react';
+import React, { forwardRef, useRef, useEffect, memo, useContext, useMemo, useState, useCallback, Children, isValidElement, cloneElement, useImperativeHandle, createRef, createContext } from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import { injectGlobal, cx, css, keyframes } from 'emotion';
+import { createTheme, StylesProvider, ThemeProvider as ThemeProvider$2, makeStyles as makeStyles$1, createStyles, styled, withStyles } from '@material-ui/core/styles';
+import { ThemeProvider as ThemeProvider$1 } from 'emotion-theming';
+import MUIButton from '@material-ui/core/Button';
+import Typography$2 from '@material-ui/core/Typography';
+import MUILink from '@material-ui/core/Link';
+import Cancel from '@material-ui/icons/Cancel';
+import Info from '@material-ui/icons/Info';
+import CheckCircle$2 from '@material-ui/icons/CheckCircle';
 import MuiAvatar from '@material-ui/core/Avatar';
-import { createStyles, makeStyles as makeStyles$1, styled, withStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-import MuiButton from '@material-ui/core/Button';
 import Chip$1 from '@material-ui/core/Chip';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import MuiPaper from '@material-ui/core/Paper';
 import MuiCard from '@material-ui/core/Card';
-import { cx, css, keyframes, injectGlobal } from 'emotion';
 import MuiCardActionArea from '@material-ui/core/CardActionArea';
 import MuiCardActions from '@material-ui/core/CardActions';
 import MuiCardContent from '@material-ui/core/CardContent';
@@ -28,9 +35,7 @@ import MuiToggleButton from '@material-ui/lab/ToggleButton';
 import MuiToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import TextField from '@material-ui/core/TextField';
 import Box from '@material-ui/core/Box';
-import SvgIcon from '@material-ui/core/SvgIcon';
 import IconButton from '@material-ui/core/IconButton';
-import Typography$1 from '@material-ui/core/Typography';
 import MuiTabs from '@material-ui/core/Tabs';
 import MuiTab from '@material-ui/core/Tab';
 import RadioGroup from '@material-ui/core/RadioGroup';
@@ -48,6 +53,25 @@ import Slide from '@material-ui/core/Slide';
 import MuiDivider from '@material-ui/core/Divider';
 import DateFnsUtils from '@date-io/date-fns';
 
+var Facebook =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  return React.createElement(SvgIcon, Object.assign({}, props, {
+    ref: ref,
+    "aria-label": "facebook",
+    viewBox: "0 0 320 512"
+  }), React.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++) {
@@ -90,6 +114,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 () {
+  injectGlobal(_templateObject());
+  return 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.createElement(ThemeProvider$1, {
+    theme: theme
+  }, React.createElement(StylesProvider, {
+    injectFirst: true
+  }, React.createElement(ThemeProvider$2, {
+    theme: theme
+  }, children)));
+};
+
+var useStyles =
+/*#__PURE__*/
+makeStyles$1(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__*/
+forwardRef(function (props, ref) {
+  return React.createElement(MUIButton, Object.assign({
+    size: "small"
+  }, props, {
+    ref: ref,
+    classes: useStyles()
+  }));
+});
+
+var Typography =
+/*#__PURE__*/
+forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'textPrimary' : _ref$color,
+      rest = _objectWithoutPropertiesLoose(_ref, ["color"]);
+
+  return React.createElement(Typography$2, Object.assign({}, rest, {
+    ref: ref,
+    color: color
+  }));
+});
+
+var useStyles$1 =
+/*#__PURE__*/
+makeStyles$1(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__*/
+forwardRef(function (props, ref) {
+  return React.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__*/
+forwardRef(function (props, ref) {
+  var name = props.name,
+      rest = _objectWithoutPropertiesLoose(props, ["name"]);
+
+  var RenderIcon = Icons[name];
+  return React.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;
@@ -197,7 +553,7 @@ var styles = function styles(theme) {
   });
 };
 
-var useStyles =
+var useStyles$2 =
 /*#__PURE__*/
 makeStyles$1(styles);
 var Avatar =
@@ -214,7 +570,7 @@ 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
   });
@@ -229,7 +585,7 @@ forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var Button =
+var Button$1 =
 /*#__PURE__*/
 forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -244,7 +600,7 @@ forwardRef(function (_ref, ref) {
       onClick = _ref.onClick,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "size", "color", "variant", "disabled", "onClick"]);
 
-  return React.createElement(MuiButton, Object.assign({
+  return React.createElement(MUIButton, Object.assign({
     onClick: onClick,
     color: color,
     disabled: disabled,
@@ -254,7 +610,7 @@ forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var theme = {
+var theme$1 = {
   color: {
     primary: {
       active: '#009A68',
@@ -336,18 +692,16 @@ var CustomBoxShadow1 = "\n0 1px 4px 0 rgba(69, 69, 69, 0.2),\n0 1px 2px 0 rgba(6
 var CustomChip =
 /*#__PURE__*/
 styled(function (_ref) {
-  var color = _ref.color,
-      active = _ref.active,
-      other = _objectWithoutPropertiesLoose(_ref, ["color", "active"]);
+  var other = _objectWithoutPropertiesLoose(_ref, ["color", "active"]);
 
   return React.createElement(Chip$1, Object.assign({}, other));
 })({
   backgroundColor: function backgroundColor(props) {
-    return props.active ? 'white' : fade(props.color || theme.color.primary["default"], 0.3);
+    return props.active ? 'white' : fade(props.color || theme$1.color.primary["default"], 0.3);
   },
   '&:hover, &:focus': {
     backgroundColor: function backgroundColor(props) {
-      return props.active ? 'white' : fade(props.color || theme.color.primary["default"], 0.3);
+      return props.active ? 'white' : fade(props.color || theme$1.color.primary["default"], 0.3);
     }
   },
   '&:active': {
@@ -356,7 +710,7 @@ 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';
@@ -391,7 +745,7 @@ var Chip = function Chip(_ref) {
   );
 };
 
-var index = /*#__PURE__*/
+var index$2 = /*#__PURE__*/
 memo(Chip);
 
 var Paper =
@@ -402,7 +756,7 @@ forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var useStyles$1 =
+var useStyles$3 =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -425,7 +779,7 @@ 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.createElement(MuiCard, Object.assign({
@@ -452,10 +806,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;
   };
 
@@ -465,7 +819,7 @@ var loadingCircle =
 /*#__PURE__*/
 keyframes(
 /*#__PURE__*/
-_templateObject());
+_templateObject$1());
 var spin =
 /*#__PURE__*/
 css(
@@ -478,11 +832,10 @@ var svgBaseProps = (_svgBaseProps = {
   height: '1em',
   fill: 'currentColor'
 }, _svgBaseProps['aria-hidden'] = true, _svgBaseProps.focusable = 'false', _svgBaseProps);
-var Icon =
+var Icon$1 =
 /*#__PURE__*/
 forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
+  var className = _ref.className,
       icon = _ref.icon,
       viewBox = _ref.viewBox,
       style = _ref.style,
@@ -521,7 +874,7 @@ forwardRef(function (_ref, ref) {
     d: icon.definition.pathData
   }));
 });
-Icon.defaultProps = {
+Icon$1.defaultProps = {
   size: 1
 };
 
@@ -543,10 +896,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;
   };
 
@@ -556,12 +909,12 @@ var DatePickerWrapper =
 /*#__PURE__*/
 styled$1('section')(
 /*#__PURE__*/
-_templateObject$1());
+_templateObject$2());
 var IonwWrapper =
 /*#__PURE__*/
 styled$1('section')(
 /*#__PURE__*/
-_templateObject2$1(), theme.color.primary["default"]);
+_templateObject2$1(), theme$1.color.primary["default"]);
 var popOverStyles =
 /*#__PURE__*/
 createStyles({
@@ -632,7 +985,7 @@ var DatePicker = function DatePicker(_ref) {
       root: inputClasses.root
     }
   };
-  return React.createElement(DatePickerWrapper, null, React.createElement(IonwWrapper, null, React.createElement(Icon, {
+  return React.createElement(DatePickerWrapper, null, React.createElement(IonwWrapper, null, React.createElement(Icon$1, {
     icon: CalendarAlt
   })), React.createElement(StyledMuiDatePicker, Object.assign({
     value: value,
@@ -648,8 +1001,8 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 function useTheme() {
-  var theme$1 = useContext(ThemeContext);
-  return theme$1 && theme$1.color ? theme$1 : theme;
+  var theme = useContext(ThemeContext);
+  return theme && theme.color ? theme : theme$1;
 }
 function makeStyles(styles) {
   var memoizedClasses = {};
@@ -708,7 +1061,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],
@@ -724,7 +1077,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__*/
 forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -736,13 +1089,13 @@ 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.createElement(Vari, Object.assign({}, props, {
     className: className ? cx(styles.typography, className) : styles.typography,
     ref: ref
   }), children);
 });
-Typography.defaultProps = {
+Typography$1.defaultProps = {
   weight: 'normal',
   gutterBottom: false,
   noWrap: false
@@ -796,7 +1149,7 @@ makeStyles$1(inputAdornmentStyles);
 var CommonKeyboardDatePickerProps = {
   keyboardIcon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: CalendarAlt
   }),
   maxDateMessage: null,
@@ -815,7 +1168,7 @@ var CommonKeyboardDatePickerProps = {
 
 var InvalidDateMsg = function InvalidDateMsg(_ref) {
   var msg = _ref.msg;
-  return React.createElement(Typography, {
+  return React.createElement(Typography$1, {
     variant: 'span',
     color: 'error'
   }, msg);
@@ -901,7 +1254,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],
@@ -919,7 +1272,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.createElement("div", Object.assign({}, props, {
     className: className ? cx(styles.tag, className) : styles.tag,
     onClick: onClick
@@ -953,7 +1306,7 @@ forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$4 =
+var useStyles$6 =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -1062,13 +1415,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.createElement(MuiSelect, Object.assign({
     className: classes.root,
@@ -1275,10 +1626,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;
   };
 
@@ -1288,13 +1639,13 @@ var InputStyle =
 /*#__PURE__*/
 styled$1('input')(
 /*#__PURE__*/
-_templateObject$2());
+_templateObject$3());
 var LabelStyle =
 /*#__PURE__*/
 styled$1('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__*/
@@ -1309,12 +1660,12 @@ var CheckedNode =
 /*#__PURE__*/
 styled$1('span')(
 /*#__PURE__*/
-_templateObject4(), theme.typography.fontWeight.normal);
+_templateObject4(), theme$1.typography.fontWeight.normal);
 var UnCheckedNode =
 /*#__PURE__*/
 styled$1('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__*/
@@ -1394,7 +1745,7 @@ var MenuList = function MenuList(_ref) {
   });
 };
 
-var useStyles$5 =
+var useStyles$7 =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -1417,13 +1768,9 @@ makeStyles$1({
 
 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.createElement(MuiMenuItem, Object.assign({}, restProps, {
     className: classes.root
   }), children);
@@ -1647,9 +1994,9 @@ var Pagination = function Pagination(_ref) {
   }), React.createElement(Box, {
     pr: 0.5,
     pl: 1
-  }, React.createElement(Typography$1, {
+  }, React.createElement(Typography$2, {
     variant: "body1"
-  }, "\uFF0F")), React.createElement(Typography$1, {
+  }, "\uFF0F")), React.createElement(Typography$2, {
     variant: "body1"
   }, totalPages)), React.createElement(ChevronRightIconButton, {
     disabled: !hasNext,
@@ -1660,10 +2007,10 @@ var Pagination = function Pagination(_ref) {
   }));
 };
 
-var index$1 = /*#__PURE__*/
+var index$3 = /*#__PURE__*/
 memo(Pagination);
 
-var useStyles$6 =
+var useStyles$8 =
 /*#__PURE__*/
 makeStyles$1({
   scrollButtons: {
@@ -1674,7 +2021,7 @@ makeStyles$1({
       margin: '0 12px'
     },
     '& > *:focus': {
-      color: theme.color.text.B5
+      color: theme$1.color.text.B5
     },
     '& > :first-child': {
       marginLeft: 0
@@ -1693,7 +2040,7 @@ forwardRef(function (_ref, ref) {
       onChange = _ref.onChange,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "value", "onChange"]);
 
-  var classes = useStyles$6();
+  var classes = useStyles$8();
   return React.createElement(MuiTabs, Object.assign({
     ref: ref,
     value: value,
@@ -1704,29 +2051,29 @@ forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$7 =
+var useStyles$9 =
 /*#__PURE__*/
-makeStyles$1(function (theme$1) {
+makeStyles$1(function (theme) {
   return 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
     })
   });
 });
@@ -1740,7 +2087,7 @@ forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "icon", "value"]);
 
-  var classes = useStyles$7();
+  var classes = useStyles$9();
   return React.createElement(MuiTab, Object.assign({
     ref: ref,
     classes: classes,
@@ -1768,7 +2115,7 @@ forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$8 =
+var useStyles$a =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -1780,27 +2127,27 @@ makeStyles$1({
     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'
     }
   }
@@ -1811,10 +2158,9 @@ 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.createElement(Radio$1, Object.assign({
     ref: ref,
     value: value,
@@ -1839,7 +2185,6 @@ 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.createElement(Checkbox, Object.assign({
@@ -1871,10 +2216,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;
   };
 
@@ -1884,12 +2229,12 @@ var StepperContainer =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$3());
+_templateObject$4());
 var ConnectorContainer =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject2$3(), theme.color.text.B3);
+_templateObject2$3(), theme$1.color.text.B3);
 
 var Stepper =
 /*#__PURE__*/
@@ -1912,7 +2257,7 @@ forwardRef(function (_ref, ref) {
       var Connector = React.createElement("div", {
         key: idx + "_connector",
         className: ConnectorContainer
-      }, React.createElement(Icon, {
+      }, React.createElement(Icon$1, {
         icon: LongArrowRight
       }));
       return [].concat(acc, [newStep, Connector]);
@@ -1923,13 +2268,13 @@ forwardRef(function (_ref, ref) {
     className: StepperContainer
   }, restProps), stepsWithConnector);
 });
-var index$2 = /*#__PURE__*/
+var index$4 = /*#__PURE__*/
 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;
   };
 
@@ -1939,14 +2284,14 @@ var SytledStep =
 /*#__PURE__*/
 styled$1('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 =
@@ -1973,13 +2318,13 @@ forwardRef(function (_ref, ref) {
     active: active
   }, restProps), children);
 });
-var index$3 = /*#__PURE__*/
+var index$5 = /*#__PURE__*/
 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;
   };
 
@@ -1989,7 +2334,7 @@ var StyledEditableTable =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$5());
+_templateObject$6());
 
 var EditableTable = function EditableTable(_ref) {
   var rows = _ref.rows,
@@ -2554,19 +2899,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];
@@ -2611,7 +2955,7 @@ forwardRef(function (_ref, ref) {
     }
   };
 
-  var styles = useStyles$9([type, visible]);
+  var styles = useStyles$b([type, visible]);
   useEffect(function () {
     window.setTimeout(function () {
       return setVisible(true);
@@ -2635,7 +2979,7 @@ forwardRef(function (_ref, ref) {
   return React.createElement("div", {
     className: styles.message,
     onTransitionEnd: onTransitionEnd
-  }, React.createElement(Icon, {
+  }, React.createElement(Icon$1, {
     className: styles.icon,
     icon: icons[type]
   }), React.createElement("div", {
@@ -2782,10 +3126,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;
   };
 
@@ -2798,7 +3142,7 @@ var semanticColors = {
   warning: '#fef1e1',
   error: '#fbd0e0'
 };
-var useStyles$a =
+var useStyles$c =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -2816,7 +3160,7 @@ var MessageWrapper =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$6());
+_templateObject$7());
 var MessageContent =
 /*#__PURE__*/
 css(
@@ -2865,28 +3209,28 @@ var transitionMap = (_transitionMap = {}, _transitionMap[Direction.LEFT] = Trans
 var semanticIcon = (_semanticIcon = {}, _semanticIcon[Semantic.WARNING] = {
   icon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: ExclamationTriangle
   }),
   color: '#F3973E'
 }, _semanticIcon[Semantic.INFO] = {
   icon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: InfoCircle
   }),
   color: '#4DBAE9'
 }, _semanticIcon[Semantic.SUCCESS] = {
   icon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: CheckCircle
   }),
   color: '#A0D45E'
 }, _semanticIcon[Semantic.ERROR] = {
   icon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: TimesCircle
   }),
   color: '#EC3C63'
@@ -2900,7 +3244,7 @@ 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
   });
@@ -2916,12 +3260,12 @@ forwardRef(function (_ref, ref) {
       color: iconColor
     }, MessageIcon), React.createElement("div", {
       className: MessageContent
-    }, title && React.createElement(Typography, {
+    }, title && React.createElement(Typography$1, {
       variant: "h6",
       weight: "medium",
       color: "text.B6",
       className: TitleStyle
-    }, title), React.createElement(Typography, {
+    }, title), React.createElement(Typography$1, {
       variant: "p",
       color: "text.B6"
     }, message))),
@@ -2965,7 +3309,7 @@ forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var Link = {
+var Link$1 = {
   name: 'list-ul-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -2993,10 +3337,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;
   };
 
@@ -3058,7 +3402,7 @@ var StyledSideMenu =
 /*#__PURE__*/
 styled$1.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$1.div(
@@ -3068,7 +3412,7 @@ var IconStyle =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject3$2(), theme.color.primary["default"]);
+_templateObject3$2(), theme$1.color.primary["default"]);
 
 var SlidingSideMenu = function SlidingSideMenu(_ref) {
   var children = _ref.children,
@@ -3116,8 +3460,8 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
     onClick: handleIconClick
   }, icon) : React.createElement(StyledIconWrapper, {
     onClick: handleIconClick
-  }, React.createElement(Icon, Object.assign({
-    icon: Link,
+  }, React.createElement(Icon$1, Object.assign({
+    icon: Link$1,
     className: cx(IconStyle, IconClassName)
   }, restIconProps))), React.createElement(StyledSideMenu, Object.assign({
     open: open,
@@ -3131,10 +3475,10 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
   }, restBackdropProps)));
 };
 
-var index$4 = /*#__PURE__*/
+var index$6 = /*#__PURE__*/
 memo(SlidingSideMenu);
 
-var useStyles$b =
+var useStyles$d =
 /*#__PURE__*/
 makeStyles$1({
   root: {
@@ -3179,7 +3523,7 @@ makeStyles$1({
 });
 
 var Divider = function Divider(props) {
-  var _useStyles = useStyles$b(props),
+  var _useStyles = useStyles$d(props),
       root = _useStyles.root;
 
   return React.createElement(MuiDivider, Object.assign({}, props, {
@@ -3189,10 +3533,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;
   };
 
@@ -3212,39 +3556,45 @@ var muiThemeForSurveyCake =
 /*#__PURE__*/
 function () {
   // Side Effects
-  injectGlobal(_templateObject$8());
+  injectGlobal(_templateObject$9());
   var BASE_FONT_SIZE = 16;
-  return createMuiTheme({
+  return 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: {
@@ -3266,30 +3616,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: {
@@ -3316,25 +3665,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'
@@ -3343,26 +3696,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: {
@@ -3410,17 +3786,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"]
           }
         }
       },
@@ -3457,11 +3833,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: {
@@ -3490,17 +3866,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: {
@@ -3512,7 +3888,7 @@ function () {
         root: {
           padding: '13px 24px',
           backgroundColor: '#fafafa',
-          borderTop: "1px solid " + theme.color.text.HB
+          borderTop: "1px solid " + theme$1.color.text.HB
         }
       },
       MuiSnackbarContent: {
@@ -3523,7 +3899,7 @@ function () {
       },
       MuiTabs: {
         indicator: {
-          backgroundColor: theme.color.primary["default"]
+          backgroundColor: theme$1.color.primary["default"]
         }
       }
     }
@@ -3531,7 +3907,7 @@ function () {
 }();
 var MuiThemeProvider = function MuiThemeProvider(_ref) {
   var children = _ref.children;
-  return React.createElement(ThemeProvider, {
+  return React.createElement(ThemeProvider$2, {
     theme: muiThemeForSurveyCake
   }, children);
 };
@@ -4017,7 +4393,7 @@ var AngleRight$1 = {
   }
 };
 
-var Link$1 = {
+var Link$2 = {
   name: 'link-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -4121,7 +4497,7 @@ var QuestionCircleOutline = {
   }
 };
 
-var Facebook = {
+var Facebook$1 = {
   name: 'facebook',
   definition: {
     viewBox: '0 0 512 512',
@@ -4260,11 +4636,11 @@ var dashboard = {
 
 
 
-var enWording = ({
+var enWording = {
   __proto__: null,
   pricing: pricing,
   dashboard: dashboard
-});
+};
 
 var pricing$1 = {
   title: '選擇方案',
@@ -4357,11 +4733,11 @@ var dashboard$1 = {
 
 
 
-var twWording = ({
+var twWording = {
   __proto__: null,
   pricing: pricing$1,
   dashboard: dashboard$1
-});
+};
 
 // TODO: Move to wording repo
 var WordingContext =
@@ -4381,5 +4757,5 @@ WordingProvider.useWording = function () {
   return useContext(WordingContext);
 };
 
-export { AnimateHeight, ArrowRight, Avatar, Backdrop, BrowserLight, Button, Card, CardActionArea, CardActions, CardContent, CardHeader, MuiCheckbox as Checkbox, index as Chip, DatePicker, Divider, EditLight, EditableTable, GroupSelect, Icon, InputSlider, KeyboardDatePicker, ListUl as ListUlFilled, Lock as LockFilled, MenuItem, MenuList, api as Message, Modal, MuiThemeProvider, index$1 as Pagination, Paper, Popper, Portal, QuestionCircleOutline, MuiRadio as Radio, Radio as RadioGroup, Select, index$4 as SlidingSideMenu, Snackbar, index$3 as Step, index$2 as Stepper, Switch, Tab, Tabs, Tag, ToggleButtonGroup, Tooltip, Typography, WordingProvider, AnalyticsLight as analyticsLight, AngleLeft as angleLeftFilled, AngleLeft$1 as angleLeftOutlined, AngleRight as angleRightFilled, AngleRight$1 as angleRightOutlined, ArrowAltLeft as arrowAltLeftFilled, BarChart as barChartFilled, BracketsCurly as bracketsCurly, CalendarAlt as calendarAltOutlined, CaretDown$1 as caretDownFilled, CaretLeft as caretLeftFilled, CaretRight as caretRightFilled, CaretUp as caretUpFilled, CheckCircle as checkCircleFilled, CheckCircle$1 as checkCircleOutlined, Check as checkFilled, Check$1 as checkOutlined, CheckSquare as checkSquareFilled, ChevronDown as chevronDownOutlined, ChevronLeft as chevronLeftFilled, ChevronRight as chevronRightFilled, Clock as clockOutlined, Code as codeOutlined, CogLight as cogLight, CommentAltLines as commentAltLinesOutlined, theme as defaultTheme, EllipsisH as ellipsisHFilled, EllipsisV as ellipsisVFilled, ExclamationCircle as exclamationCircleFilled, ExclamationCircle$1 as exclamationCircleOutlined, ExclamationTriangle as exclamationTriangleFilled, ExternalLinkLight as externalLinkLight, Facebook as facebookBrand, FacebookIn as facebookIn, FileAlt as fileAltOutlined, FileCertificate as fileCertificateOutlined, Filter as filterOutlined, GlobalAsia as globalAsiaOutlined, HandPointer as handPointerFilled, HandPointer$1 as handPointerOutlined, Heart as heartFilled, Heart$1 as heartOutlined, hexToRgba, InfoCircle as infoCircleFilled, InfoCircle$1 as infoCircleOutlined, LinkLight as linkLight, Link$1 as linkOutlined, Linkedin as linkedinBrand, LinkedinIn as linkedinIn, Link as listUlOutlined, LongArrowRight as longArrowRightOutlined, makeStyles, MinusLight as minusLightFilled, muiThemeForSurveyCake, PageBreak as pageBreak, PenLight as penLight, PlusCircle as plusCircleOutlined, Plus as plusFilled, PlusLight as plusLightFilled, QRCode as qrcodeOutlined, QuestionCircle as questionCircleFilled, Redo as redoOutlined, Search as searchFilled, SearchLight as searchLightOutlined, SortDown as sortDownFilled, Sort as sortFilled, SortUp as sortUpFilled, SpinnerThird as spinnerThirdOutlined, Square as squareOutlined, Star as starFilled, Star$1 as starOutlined, ThLarge as thLargeOutLined, ThumbUp as thumbUpFilled, ThumbUp$1 as thumbUpOutlined, TimesCircle as timesCircleFilled, TimesCircle$1 as timesCircleOutlined, Times as timesOutlined, TrashAltRegular as trashAltRegular, Twitter as twitterBrand, TwitterIn as twitterIn, useTheme, User as userFilled, UserPlus as userPlusFilled, UserPlus$1 as userPlusOutlined, Users as usersFilled, withMuiPickersUtilsProvider };
+export { AnimateHeight, ArrowRight, Avatar, Backdrop, BrowserLight, Button$1 as Button, Card, CardActionArea, CardActions, CardContent, CardHeader, MuiCheckbox as Checkbox, index$2 as Chip, DatePicker, Divider, EditLight, EditableTable, GroupSelect, Icon$1 as Icon, InputSlider, KeyboardDatePicker, ListUl as ListUlFilled, Lock as LockFilled, MenuItem, MenuList, api as Message, Modal, MuiThemeProvider, index$3 as Pagination, Paper, Popper, Portal, QuestionCircleOutline, MuiRadio as Radio, Radio as RadioGroup, Select, index$6 as SlidingSideMenu, Snackbar, index$5 as Step, index$4 as Stepper, Switch, Tab, Tabs, Tag, ToggleButtonGroup, Tooltip, Typography$1 as Typography, index$1 as V2, WordingProvider, AnalyticsLight as analyticsLight, AngleLeft as angleLeftFilled, AngleLeft$1 as angleLeftOutlined, AngleRight as angleRightFilled, AngleRight$1 as angleRightOutlined, ArrowAltLeft as arrowAltLeftFilled, BarChart as barChartFilled, BracketsCurly as bracketsCurly, CalendarAlt as calendarAltOutlined, CaretDown$1 as caretDownFilled, CaretLeft as caretLeftFilled, CaretRight as caretRightFilled, CaretUp as caretUpFilled, CheckCircle as checkCircleFilled, CheckCircle$1 as checkCircleOutlined, Check as checkFilled, Check$1 as checkOutlined, CheckSquare as checkSquareFilled, ChevronDown as chevronDownOutlined, ChevronLeft as chevronLeftFilled, ChevronRight as chevronRightFilled, Clock as clockOutlined, Code as codeOutlined, CogLight as cogLight, CommentAltLines as commentAltLinesOutlined, theme$1 as defaultTheme, EllipsisH as ellipsisHFilled, EllipsisV as ellipsisVFilled, ExclamationCircle as exclamationCircleFilled, ExclamationCircle$1 as exclamationCircleOutlined, ExclamationTriangle as exclamationTriangleFilled, ExternalLinkLight as externalLinkLight, Facebook$1 as facebookBrand, FacebookIn as facebookIn, FileAlt as fileAltOutlined, FileCertificate as fileCertificateOutlined, Filter as filterOutlined, GlobalAsia as globalAsiaOutlined, HandPointer as handPointerFilled, HandPointer$1 as handPointerOutlined, Heart as heartFilled, Heart$1 as heartOutlined, hexToRgba, InfoCircle as infoCircleFilled, InfoCircle$1 as infoCircleOutlined, LinkLight as linkLight, Link$2 as linkOutlined, Linkedin as linkedinBrand, LinkedinIn as linkedinIn, Link$1 as listUlOutlined, LongArrowRight as longArrowRightOutlined, makeStyles, MinusLight as minusLightFilled, muiThemeForSurveyCake, PageBreak as pageBreak, PenLight as penLight, PlusCircle as plusCircleOutlined, Plus as plusFilled, PlusLight as plusLightFilled, QRCode as qrcodeOutlined, QuestionCircle as questionCircleFilled, Redo as redoOutlined, Search as searchFilled, SearchLight as searchLightOutlined, SortDown as sortDownFilled, Sort as sortFilled, SortUp as sortUpFilled, SpinnerThird as spinnerThirdOutlined, Square as squareOutlined, Star as starFilled, Star$1 as starOutlined, ThLarge as thLargeOutLined, ThumbUp as thumbUpFilled, ThumbUp$1 as thumbUpOutlined, TimesCircle as timesCircleFilled, TimesCircle$1 as timesCircleOutlined, Times as timesOutlined, TrashAltRegular as trashAltRegular, Twitter as twitterBrand, TwitterIn as twitterIn, useTheme, User as userFilled, UserPlus as userPlusFilled, UserPlus$1 as userPlusOutlined, Users as usersFilled, withMuiPickersUtilsProvider };
 //# sourceMappingURL=rc.esm.js.map