@surveycake/rc 3.0.0-alpha.13 → 3.0.0-alpha.17

package/dist/rc.cjs.development.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var MUICssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
-var React = require('react');
-var React__default = _interopDefault(React);
-var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
 var styles$5 = require('@material-ui/core/styles');
 var polished = require('polished');
+var React = require('react');
+var React__default = _interopDefault(React);
 var emotionTheming = require('emotion-theming');
 var MUIBackdrop = _interopDefault(require('@material-ui/core/Backdrop'));
 var Box$1 = _interopDefault(require('@material-ui/core/Box'));
@@ -21,37 +20,55 @@ var MUIDialogActions = _interopDefault(require('@material-ui/core/DialogActions'
 var MUIDialogContent = _interopDefault(require('@material-ui/core/DialogContent'));
 var MUIDialogContentText = _interopDefault(require('@material-ui/core/DialogContentText'));
 var MUIDialogTitle = _interopDefault(require('@material-ui/core/DialogTitle'));
-var Fade = _interopDefault(require('@material-ui/core/Fade'));
+var Fade$1 = _interopDefault(require('@material-ui/core/Fade'));
 var MUIFormControl = _interopDefault(require('@material-ui/core/FormControl'));
 var MUIFormControlLabel = _interopDefault(require('@material-ui/core/FormControlLabel'));
 var MUIFormGroup = _interopDefault(require('@material-ui/core/FormGroup'));
 var MUIFormHelperText = _interopDefault(require('@material-ui/core/FormHelperText'));
 var MUIFormLabel = _interopDefault(require('@material-ui/core/FormLabel'));
-var MUIIconButton = _interopDefault(require('@material-ui/core/IconButton'));
-var MUILink = _interopDefault(require('@material-ui/core/Link'));
-var MuiMenuItem$1 = _interopDefault(require('@material-ui/core/MenuItem'));
-var MUIOutlinedInput = _interopDefault(require('@material-ui/core/OutlinedInput'));
+var emotion = require('emotion');
 var MuiSelect$1 = _interopDefault(require('@material-ui/core/Select'));
+var AddCircleOutline = _interopDefault(require('@material-ui/icons/AddCircleOutline'));
+var ArrowDropDown = _interopDefault(require('@material-ui/icons/ArrowDropDown'));
 var Cancel = _interopDefault(require('@material-ui/icons/Cancel'));
 var CheckCircle$2 = _interopDefault(require('@material-ui/icons/CheckCircle'));
 var Close = _interopDefault(require('@material-ui/icons/Close'));
+var Delete = _interopDefault(require('@material-ui/icons/Delete'));
+var Edit = _interopDefault(require('@material-ui/icons/Edit'));
+var FormatBold = _interopDefault(require('@material-ui/icons/FormatBold'));
+var FormatColorFill = _interopDefault(require('@material-ui/icons/FormatColorFill'));
+var FormatItalic = _interopDefault(require('@material-ui/icons/FormatItalic'));
+var FormatUnderlined = _interopDefault(require('@material-ui/icons/FormatUnderlined'));
+var Help = _interopDefault(require('@material-ui/icons/Help'));
 var HelpOutline = _interopDefault(require('@material-ui/icons/HelpOutline'));
+var Info = _interopDefault(require('@material-ui/icons/Info'));
 var KeyboardArrowDown = _interopDefault(require('@material-ui/icons/KeyboardArrowDown'));
+var Link$3 = _interopDefault(require('@material-ui/icons/Link'));
+var NavigateNext = _interopDefault(require('@material-ui/icons/NavigateNext'));
+var OpenInNew = _interopDefault(require('@material-ui/icons/OpenInNew'));
 var ReportProblemRounded = _interopDefault(require('@material-ui/icons/ReportProblemRounded'));
 var Schedule = _interopDefault(require('@material-ui/icons/Schedule'));
-var Info$1 = _interopDefault(require('@material-ui/icons/Info'));
+var Settings = _interopDefault(require('@material-ui/icons/Settings'));
+var SettingsOutlined = _interopDefault(require('@material-ui/icons/SettingsOutlined'));
+var WatchLater = _interopDefault(require('@material-ui/icons/WatchLater'));
+var WebAsset = _interopDefault(require('@material-ui/icons/WebAsset'));
+var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
+var MuiListSubheader$1 = _interopDefault(require('@material-ui/core/ListSubheader'));
+var MuiMenuItem$1 = _interopDefault(require('@material-ui/core/MenuItem'));
+var Typography$2 = _interopDefault(require('@material-ui/core/Typography'));
+var MUIIconButton = _interopDefault(require('@material-ui/core/IconButton'));
+var MUILink = _interopDefault(require('@material-ui/core/Link'));
+var MUIOutlinedInput = _interopDefault(require('@material-ui/core/OutlinedInput'));
 var MUISwitch = _interopDefault(require('@material-ui/core/Switch'));
 var MUITextField = _interopDefault(require('@material-ui/core/TextField'));
 var MUIToggleButton = _interopDefault(require('@material-ui/lab/ToggleButton'));
 var MUIToggleButtonGroup = _interopDefault(require('@material-ui/lab/ToggleButtonGroup'));
 var MUITooltip = _interopDefault(require('@material-ui/core/Tooltip'));
-var Typography$1 = _interopDefault(require('@material-ui/core/Typography'));
 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'));
@@ -59,7 +76,6 @@ var MuiCardHeader = _interopDefault(require('@material-ui/core/CardHeader'));
 var pickers = require('@material-ui/pickers');
 var styled = _interopDefault(require('@emotion/styled'));
 var core$1 = require('@emotion/core');
-var MuiListSubheader = _interopDefault(require('@material-ui/core/ListSubheader'));
 var Popper$1 = _interopDefault(require('@material-ui/core/Popper'));
 var ClickAwayListener = _interopDefault(require('@material-ui/core/ClickAwayListener'));
 var MuiMenuList = _interopDefault(require('@material-ui/core/MenuList'));
@@ -79,72 +95,6 @@ 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 BrowserOutlined =
-/*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 24 24"
-  }), React__default.createElement("path", {
-    d: "M21.75 1.5H2.25C1.00781 1.5 0 2.50781 0 3.75V20.25C0 21.4922 1.00781 22.5 2.25 22.5H21.75C22.9922 22.5 24 21.4922 24 20.25V3.75C24 2.50781 22.9922 1.5 21.75 1.5ZM1.5 3.75C1.5 3.3375 1.8375 3 2.25 3H4.5V6H1.5V3.75ZM22.5 20.25C22.5 20.6625 22.1625 21 21.75 21H2.25C1.8375 21 1.5 20.6625 1.5 20.25V7.5H22.5V20.25ZM22.5 6H6V3H21.75C22.1625 3 22.5 3.3375 22.5 3.75V6Z"
-  }));
-});
-
-var Info =
-/*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React__default.createElement("path", {
-    d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-  }));
-});
-
-var Question =
-/*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React__default.createElement("path", {
-    d: "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
-  }));
-});
-
-var QuestionOutlined =
-/*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 16 16"
-  }), React__default.createElement("path", {
-    d: "M0 8C0 3.58332 3.58203 0 8 0C12.418 0 16 3.58332 16 8C16 12.4193 12.418 16 8 16C3.58203 16 0 12.4193 0 8ZM1.54839 8C1.54839 11.5667 4.43445 14.4516 8 14.4516C11.5667 14.4516 14.4516 11.5655 14.4516 8C14.4516 4.43455 11.5642 1.54839 8 1.54839C4.43458 1.54839 1.54839 4.43565 1.54839 8ZM11.4595 6.21935C11.4595 7.56456 10.5559 8.08603 9.87261 8.48033C9.45725 8.72003 9.12332 8.91273 9.12332 9.21494V9.41935C9.12332 9.63313 8.95 9.80645 8.73623 9.80645H7.26374C7.04997 9.80645 6.87665 9.63313 6.87665 9.41935V9.14003C6.87665 8.01457 7.70948 7.5485 8.36365 7.18241L8.41145 7.15565C8.97794 6.83806 9.32513 6.62206 9.32513 6.20148C9.32513 5.64516 8.61548 5.2759 8.04177 5.2759C7.29374 5.2759 6.94842 5.63 6.463 6.24265C6.33213 6.40781 6.09332 6.43848 5.92539 6.31116L5.02784 5.63058C4.8631 5.50568 4.82619 5.27361 4.94255 5.10274C5.70471 3.98358 6.67548 3.35484 8.1869 3.35484C9.76984 3.35484 11.4595 4.59045 11.4595 6.21935ZM8 12.9677C8.74706 12.9677 9.35484 12.36 9.35484 11.6129C9.35484 10.8658 8.74706 10.2581 8 10.2581C7.25294 10.2581 6.64516 10.8658 6.64516 11.6129C6.64516 12.36 7.25294 12.9677 8 12.9677Z"
-  }));
-});
-
-var SettingsOutlined =
-/*#__PURE__*/
-React.forwardRef(function (props, ref) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React__default.createElement("path", {
-    d: "M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"
-  }));
-});
-
-
-
-var index = {
-  __proto__: null,
-  BrowserOutlined: BrowserOutlined,
-  Info: Info,
-  Question: Question,
-  QuestionOutlined: QuestionOutlined,
-  SettingsOutlined: SettingsOutlined
-};
-
 var core =
 /*#__PURE__*/
 styles$5.createTheme({
@@ -480,7 +430,7 @@ var MuiLink = {
   root: {
     '&:hover': {
       color: function color(props) {
-        return props.color && (props.color === 'primary' || props.color === 'secondary') ? core.palette[props.color].dark : core.palette.primary.dark;
+        return props.color && (props.color === 'primary' || props.color === 'secondary' || props.color === 'error') ? core.palette[props.color].dark : 'inherit';
       }
     }
   }
@@ -497,7 +447,9 @@ var MuiMenuItem = {
     core.spacing(1) + "px",
     '&.Mui-selected': {
       color: core.palette.primary.main,
-      backgroundColor: 'initial',
+      backgroundColor:
+      /*#__PURE__*/
+      polished.lighten(0.45, core.palette.primary.main),
       '&:hover': {
         backgroundColor:
         /*#__PURE__*/
@@ -553,6 +505,16 @@ var MuiOutlinedInput = {
   }
 };
 
+var useMenuStyles =
+/*#__PURE__*/
+styles$5.makeStyles(function (theme) {
+  return {
+    root: {
+      boxShadow: 'none',
+      border: "1px solid " + theme.palette.primary.main
+    }
+  };
+});
 var MuiSelect = {
   root:
   /*#__PURE__*/
@@ -733,6 +695,30 @@ var MuiTypography = {
   }, _h6)
 };
 
+var MuiList = {
+  root: {
+    backgroundColor: core.palette.common.white
+  },
+  padding: {
+    paddingLeft:
+    /*#__PURE__*/
+    core.spacing(1),
+    paddingRight:
+    /*#__PURE__*/
+    core.spacing(1)
+  }
+};
+
+var MuiListSubheader = {
+  root: {
+    lineHeight: 1.6,
+    color: core.palette.grey[500]
+  }
+};
+
+var useMUITheme = function useMUITheme() {
+  return styles$5.useTheme();
+};
 var theme =
 /*#__PURE__*/
 styles$5.createTheme({
@@ -754,7 +740,9 @@ styles$5.createTheme({
     MuiToggleButton: MuiToggleButton,
     MuiToggleButtonGroup: MuiToggleButtonGroup,
     MuiTooltip: MuiTooltip,
-    MuiTypography: MuiTypography
+    MuiTypography: MuiTypography,
+    MuiList: MuiList,
+    MuiListSubheader: MuiListSubheader
   }
 }, core);
 
@@ -773,23 +761,25 @@ var PureThemeProvider = function PureThemeProvider(props) {
     theme: theme
   }, props.children);
 };
-var useMUITheme = function useMUITheme() {
-  return styles$5.useTheme();
-};
 
-var index$1 = /*#__PURE__*/
-React.forwardRef(function Backdrop(props, ref) {
+var Backdrop =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIBackdrop, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+Backdrop.displayName = 'Backdrop';
 
-function Box(props) {
+var Box = function Box(props) {
   return React__default.createElement(Box$1, Object.assign({}, props), props.children);
-}
+};
 
-var Button = /*#__PURE__*/
-React.forwardRef(function Button(props, ref) {
+Box.displayName = 'Box';
+
+var Button =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   var _props$size = props.size,
       size = _props$size === void 0 ? 'small' : _props$size,
       _props$disableElevati = props.disableElevation,
@@ -802,176 +792,181 @@ React.forwardRef(function Button(props, ref) {
     size: size
   }));
 });
+Button.displayName = 'Button';
 
-var index$2 = /*#__PURE__*/
-React.forwardRef(function ButtonGroup(props, ref) {
+var ButtonGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIButtonGroup, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+ButtonGroup.displayName = 'ButtonGroup';
 
-var CircularProgress = /*#__PURE__*/
-React.forwardRef(function CircularProgress(props, ref) {
+var CircularProgress =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUICircularProgress, Object.assign({}, props, {
     ref: ref
   }));
 });
+CircularProgress.displayName = 'CircularProgress';
 
-function CssBaseline(props) {
+var CssBaseline = function CssBaseline(props) {
   return React__default.createElement(MUICssBaseline, Object.assign({}, props), props.children);
-}
+};
 
-var index$3 = /*#__PURE__*/
-React.forwardRef(function Dialog(props, ref) {
+var Dialog =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   var rest = _objectWithoutPropertiesLoose(props, ["disableBackdropClick", "onBackdropClick", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "onRendered"]);
 
   return React__default.createElement(MUIDialog, Object.assign({}, rest, {
     ref: ref
   }), props.children);
 });
+Dialog.displayName = 'Dialog';
 
-var index$4 = /*#__PURE__*/
-React.forwardRef(function DialogActions(props, ref) {
+var DialogActions =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIDialogActions, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogActions.displayName = 'DialogActions';
 
-var index$5 = /*#__PURE__*/
-React.forwardRef(function DialogContent(props, ref) {
+var DialogContent =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIDialogContent, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogContent.displayName = 'DialogContent';
 
-var index$6 = /*#__PURE__*/
-React.forwardRef(function DialogContentText(props, ref) {
+var DialogContentText =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIDialogContentText, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogContentText.displayName = 'DialogContentText';
 
-var index$7 = /*#__PURE__*/
-React.forwardRef(function DialogTitle(props, ref) {
+var DialogTitle =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIDialogTitle, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogTitle.displayName = 'DialogTitle';
 
-var index$8 = /*#__PURE__*/
-React.forwardRef(function Fade$1(props, ref) {
-  return React__default.createElement(Fade, Object.assign({}, props, {
+var Fade =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(Fade$1, Object.assign({}, props, {
     ref: ref
   }));
 });
+Fade.displayName = 'Fade';
 
-var index$9 = /*#__PURE__*/
-React.forwardRef(function FormControl(props, ref) {
+var FormControl =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIFormControl, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+FormControl.displayName = 'FormControl';
 
-var index$a = /*#__PURE__*/
-React.forwardRef(function FormControlLabel(props, ref) {
+var FormControlLabel =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIFormControlLabel, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormControlLabel.displayName = 'FormControlLabel';
 
-var index$b = /*#__PURE__*/
-React.forwardRef(function FormGroup(props, ref) {
+var FormGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIFormGroup, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormGroup.displayName = 'FormGroup';
 
-var index$c = /*#__PURE__*/
-React.forwardRef(function FormHelperText(props, ref) {
+var FormHelperText =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIFormHelperText, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormHelperText.displayName = 'FormHelperText';
 
-var index$d = /*#__PURE__*/
-React.forwardRef(function FormLabel(props, ref) {
+var FormLabel =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   var rest = _extends({}, props);
 
   return React__default.createElement(MUIFormLabel, Object.assign({}, rest, {
     ref: ref
   }), props.children);
 });
+FormLabel.displayName = 'FormLabel';
 
-var index$e = /*#__PURE__*/
-React.forwardRef(function IconButton(props, ref) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'small' : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, ["size"]);
-
-  return React__default.createElement(MUIIconButton, Object.assign({}, rest, {
-    ref: ref,
-    size: size
-  }));
-});
-
-var index$f = /*#__PURE__*/
-React.forwardRef(function Link(props, ref) {
-  var _props$underline = props.underline,
-      underline = _props$underline === void 0 ? 'none' : _props$underline,
-      rest = _objectWithoutPropertiesLoose(props, ["underline"]);
-
-  return React__default.createElement(MUILink, Object.assign({}, rest, {
+var FilterAlt =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props, {
     ref: ref,
-    underline: underline
-  }));
-});
-
-var index$g = /*#__PURE__*/
-React.forwardRef(function LoadingButton(props, ref) {
-  var _props$loading = props.loading,
-      loading = _props$loading === void 0 ? true : _props$loading,
-      rest = _objectWithoutPropertiesLoose(props, ["loading"]);
-
-  return React__default.createElement(Button, Object.assign({}, rest, {
-    startIcon: loading && React__default.createElement(CircularProgress, {
-      size: "1rem",
-      color: "inherit"
-    }),
-    ref: ref
-  }));
-});
-
-var index$h = /*#__PURE__*/
-React.forwardRef(function MenuItem(props, ref) {
-  var rest = _objectWithoutPropertiesLoose(props, ["button"]);
-
-  return React__default.createElement(MuiMenuItem$1, Object.assign({}, rest, {
-    ref: ref
-  }), props.children);
-});
-
-var index$i = /*#__PURE__*/
-React.forwardRef(function OutlinedInput(props, ref) {
-  return React__default.createElement(MUIOutlinedInput, Object.assign({}, props, {
-    ref: ref
-  }));
+    viewBox: "0 0 24 24"
+  }), React__default.createElement("g", null, React__default.createElement("path", {
+    d: "M0,0h24 M24,24H0",
+    fill: "none"
+  }), React__default.createElement("path", {
+    d: "M4.25,5.61C6.27,8.2,10,13,10,13v6c0,0.55,0.45,1,1,1h2c0.55,0,1-0.45,1-1v-6c0,0,3.72-4.8,5.74-7.39 C20.25,4.95,19.78,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"
+  }), React__default.createElement("path", {
+    d: "M0,0h24v24H0V0z",
+    fill: "none"
+  })));
 });
+FilterAlt.displayName = 'FilterAlt';
 
 var Icons = {
-  BrowserOutlined: BrowserOutlined,
+  AddCircleOutline: AddCircleOutline,
+  ArrowDropDown: ArrowDropDown,
   Cancel: Cancel,
   CheckCircle: CheckCircle$2,
   Close: Close,
+  Delete: Delete,
+  Edit: Edit,
+  FilterAlt: FilterAlt,
+  FormatBold: FormatBold,
+  FormatColorFill: FormatColorFill,
+  FormatItalic: FormatItalic,
+  FormatUnderlined: FormatUnderlined,
+  Help: Help,
   HelpOutline: HelpOutline,
-  Info: Info$1,
+  Info: Info,
   KeyboardArrowDown: KeyboardArrowDown,
-  Question: Question,
+  Link: Link$3,
+  NavigateNext: NavigateNext,
+  OpenInNew: OpenInNew,
   ReportProblemRounded: ReportProblemRounded,
   Schedule: Schedule,
-  SettingsOutlined: SettingsOutlined
+  Settings: Settings,
+  SettingsOutlined: SettingsOutlined,
+  WatchLater: WatchLater,
+  WebAsset: WebAsset
 };
-var index$j = /*#__PURE__*/
-React.forwardRef(function Icon(props, ref) {
+var Icon =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   var name = props.name,
       rest = _objectWithoutPropertiesLoose(props, ["name"]);
 
@@ -980,19 +975,11 @@ React.forwardRef(function Icon(props, ref) {
     ref: ref
   }));
 });
+Icon.displayName = 'Icon';
 
-var useMenuStyles =
+var Select =
 /*#__PURE__*/
-styles$5.makeStyles(function (theme) {
-  return {
-    root: {
-      boxShadow: 'none',
-      border: "1px solid " + theme.palette.primary.main
-    }
-  };
-});
-var index$k = /*#__PURE__*/
-React.forwardRef(function Select(props, ref) {
+React.forwardRef(function (props, ref) {
   var theme = useMUITheme();
 
   var _useMenuStyles = useMenuStyles(),
@@ -1017,9 +1004,217 @@ React.forwardRef(function Select(props, ref) {
     }
   }), props.children);
 });
+Select.displayName = 'Select';
+
+var ListSubheader =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$disableGutters = props.disableGutters,
+      disableGutters = _props$disableGutters === void 0 ? true : _props$disableGutters,
+      rest = _objectWithoutPropertiesLoose(props, ["disableGutters"]);
+
+  return React__default.createElement(MuiListSubheader$1, Object.assign({}, rest, {
+    ref: ref,
+    disableGutters: disableGutters
+  }), props.children);
+});
+ListSubheader.displayName = 'ListSubheader';
+
+var MenuItem =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var rest = _objectWithoutPropertiesLoose(props, ["button"]);
+
+  return React__default.createElement(MuiMenuItem$1, Object.assign({}, rest, {
+    ref: ref
+  }), props.children);
+});
+MenuItem.displayName = 'MenuItem';
 
-var index$l = /*#__PURE__*/
-React.forwardRef(function Switch(props, ref) {
+var Typography =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(Typography$2, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+Typography.displayName = 'Typography';
+
+var useSelectStyle =
+/*#__PURE__*/
+styles$5.makeStyles(function () {
+  return {
+    select: {
+      padding: '5px 8px',
+      display: 'inline-flex'
+    }
+  };
+});
+var useCustomOptionStyle =
+/*#__PURE__*/
+styles$5.makeStyles(function (theme) {
+  return {
+    container: {
+      backgroundColor: theme.palette.common.white,
+      '&:hover': {
+        backgroundColor: polished.lighten(0.3, theme.palette.primary.main),
+        '& > div': {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.common.white
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: polished.lighten(0.45, theme.palette.primary.main),
+        '& > div': {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.common.white
+        }
+      }
+    },
+    root: {
+      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      color: theme.palette.grey[600],
+      backgroundColor: theme.palette.grey[100],
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      lineHeight: 1.6,
+      borderRadius: theme.spacing(0.5),
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(100% - 16px)',
+      transition: '0.2s',
+      transitionProperty: 'color, background-color'
+    },
+    "var": {
+      '&::before': {
+        content: '"# "'
+      }
+    }
+  };
+});
+
+function _templateObject() {
+  var data = _taggedTemplateLiteralLoose(["\n                        color: ", ";\n                      "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var GroupSelect =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var theme = useMUITheme();
+  var customOptionStyle = useCustomOptionStyle();
+  var selectStyle = useSelectStyle();
+
+  var groups = props.groups,
+      value = props.value,
+      onChange = props.onChange,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'outlined' : _props$variant,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      rest = _objectWithoutPropertiesLoose(props, ["groups", "value", "onChange", "variant", "onOpen", "onClose"]);
+
+  return React__default.createElement(Select, Object.assign({}, rest, {
+    ref: ref,
+    value: value,
+    onChange: onChange,
+    variant: variant,
+    onOpen: onOpen,
+    onClose: onClose,
+    displayEmpty: true,
+    fullWidth: true,
+    classes: selectStyle
+  }), groups.map(function (group) {
+    return [React__default.createElement(ListSubheader, {
+      style: {
+        pointerEvents: 'none'
+      }
+    }, group.groupTitle), group.options.map(function (opt) {
+      if (opt.emptyLabel) {
+        return React__default.createElement(MenuItem, {
+          style: {
+            pointerEvents: 'none'
+          }
+        }, React__default.createElement(Typography, {
+          variant: "body2",
+          className: emotion.css(_templateObject(), theme.palette.grey[500])
+        }, opt.emptyLabel));
+      }
+
+      return React__default.createElement(MenuItem, {
+        className: customOptionStyle.container,
+        value: opt.value,
+        key: opt.value
+      }, React__default.createElement("div", {
+        className: emotion.cx(customOptionStyle.root, customOptionStyle[group.optionType])
+      }, opt.children));
+    })];
+  }));
+});
+GroupSelect.displayName = 'GroupSelect';
+
+var IconButton =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      rest = _objectWithoutPropertiesLoose(props, ["size"]);
+
+  return React__default.createElement(MUIIconButton, Object.assign({}, rest, {
+    ref: ref,
+    size: size
+  }));
+});
+IconButton.displayName = 'IconButton';
+
+var Link =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$underline = props.underline,
+      underline = _props$underline === void 0 ? 'none' : _props$underline,
+      rest = _objectWithoutPropertiesLoose(props, ["underline"]);
+
+  return React__default.createElement(MUILink, Object.assign({}, rest, {
+    ref: ref,
+    underline: underline
+  }));
+});
+Link.displayName = 'Link';
+
+var LoadingButton =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var _props$loading = props.loading,
+      loading = _props$loading === void 0 ? true : _props$loading,
+      rest = _objectWithoutPropertiesLoose(props, ["loading"]);
+
+  return React__default.createElement(Button, Object.assign({}, rest, {
+    startIcon: loading && React__default.createElement(CircularProgress, {
+      size: "1rem",
+      color: "inherit"
+    }),
+    ref: ref
+  }));
+});
+LoadingButton.displayName = 'LoadingButton';
+
+var OutlinedInput =
+/*#__PURE__*/
+React.forwardRef(function OutlinedInput(props, ref) {
+  return React__default.createElement(MUIOutlinedInput, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+OutlinedInput.displayName = 'OutlinedInput';
+
+var Switch =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   var _props$color = props.color,
       color = _props$color === void 0 ? 'default' : _props$color,
       rest = _objectWithoutPropertiesLoose(props, ["color"]);
@@ -1029,86 +1224,83 @@ React.forwardRef(function Switch(props, ref) {
     color: color
   }));
 });
+Switch.displayName = 'Switch';
 
-var index$m = /*#__PURE__*/
-React.forwardRef(function TextField(props, ref) {
+var TextField =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUITextField, Object.assign({}, props, {
     ref: ref
   }));
 });
+TextField.displayName = 'TextField';
 
-var index$n = /*#__PURE__*/
-React.forwardRef(function ToggleButton(props, ref) {
+var ToggleButton =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIToggleButton, Object.assign({}, props, {
     ref: ref
   }));
 });
+ToggleButton.displayName = 'ToggleButton';
 
-var index$o = /*#__PURE__*/
-React.forwardRef(function ToggleButtonGroup(props, ref) {
+var ToggleButtonGroup =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIToggleButtonGroup, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
-var index$p = /*#__PURE__*/
-React.forwardRef(function Tooltip(props, ref) {
+var Tooltip =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
   return React__default.createElement(MUITooltip, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
-
-var index$q = /*#__PURE__*/
-React.forwardRef(function Typography(props, ref) {
-  var _props$color = props.color,
-      color = _props$color === void 0 ? 'textPrimary' : _props$color,
-      rest = _objectWithoutPropertiesLoose(props, ["color"]);
-
-  return React__default.createElement(Typography$1, Object.assign({}, rest, {
-    ref: ref,
-    color: color
-  }));
-});
+Tooltip.displayName = 'Tooltip';
 
 
 
-var index$r = {
+var index = {
   __proto__: null,
-  CustomSvgIcon: index,
   theme: theme,
-  ThemeProvider: ThemeProvider,
   useMUITheme: useMUITheme,
+  ThemeProvider: ThemeProvider,
   PureThemeProvider: PureThemeProvider,
-  Backdrop: index$1,
+  Backdrop: Backdrop,
   Box: Box,
   Button: Button,
-  ButtonGroup: index$2,
+  ButtonGroup: ButtonGroup,
   CircularProgress: CircularProgress,
   CssBaseline: CssBaseline,
-  Dialog: index$3,
-  DialogActions: index$4,
-  DialogContent: index$5,
-  DialogContentText: index$6,
-  DialogTitle: index$7,
-  Fade: index$8,
-  FormControl: index$9,
-  FormControlLabel: index$a,
-  FormGroup: index$b,
-  FormHelperText: index$c,
-  FormLabel: index$d,
-  IconButton: index$e,
-  Link: index$f,
-  LoadingButton: index$g,
-  MenuItem: index$h,
-  OutlinedInput: index$i,
-  Select: index$k,
-  Switch: index$l,
-  TextField: index$m,
-  ToggleButton: index$n,
-  ToggleButtonGroup: index$o,
-  Tooltip: index$p,
-  Typography: index$q,
-  Icon: index$j
+  Dialog: Dialog,
+  DialogActions: DialogActions,
+  DialogContent: DialogContent,
+  DialogContentText: DialogContentText,
+  DialogTitle: DialogTitle,
+  Fade: Fade,
+  FormControl: FormControl,
+  FormControlLabel: FormControlLabel,
+  FormGroup: FormGroup,
+  FormHelperText: FormHelperText,
+  FormLabel: FormLabel,
+  GroupSelect: GroupSelect,
+  IconButton: IconButton,
+  Link: Link,
+  LoadingButton: LoadingButton,
+  MenuItem: MenuItem,
+  OutlinedInput: OutlinedInput,
+  Select: Select,
+  Switch: Switch,
+  TextField: TextField,
+  ToggleButton: ToggleButton,
+  ToggleButtonGroup: ToggleButtonGroup,
+  Tooltip: Tooltip,
+  Typography: Typography,
+  Icon: Icon
 };
 
 var getAutoHeightDuration = function getAutoHeightDuration(height) {
@@ -1410,7 +1602,7 @@ var Chip = function Chip(_ref) {
   );
 };
 
-var index$s = /*#__PURE__*/
+var index$1 = /*#__PURE__*/
 React.memo(Chip);
 
 var Paper =
@@ -1471,10 +1663,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;
   };
 
@@ -1484,7 +1676,7 @@ var loadingCircle =
 /*#__PURE__*/
 emotion.keyframes(
 /*#__PURE__*/
-_templateObject());
+_templateObject$1());
 var spin =
 /*#__PURE__*/
 emotion.css(
@@ -1497,7 +1689,7 @@ 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 className = _ref.className,
@@ -1539,7 +1731,7 @@ React.forwardRef(function (_ref, ref) {
     d: icon.definition.pathData
   }));
 });
-Icon.defaultProps = {
+Icon$1.defaultProps = {
   size: 1
 };
 
@@ -1561,10 +1753,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;
   };
 
@@ -1574,7 +1766,7 @@ var DatePickerWrapper =
 /*#__PURE__*/
 styled('section')(
 /*#__PURE__*/
-_templateObject$1());
+_templateObject$2());
 var IonwWrapper =
 /*#__PURE__*/
 styled('section')(
@@ -1650,7 +1842,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,
@@ -1742,7 +1934,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,
@@ -1760,7 +1952,7 @@ React.forwardRef(function (_ref, ref) {
     ref: ref
   }), children);
 });
-Typography.defaultProps = {
+Typography$1.defaultProps = {
   weight: 'normal',
   gutterBottom: false,
   noWrap: false
@@ -1814,7 +2006,7 @@ styles$5.makeStyles(inputAdornmentStyles);
 var CommonKeyboardDatePickerProps = {
   keyboardIcon:
   /*#__PURE__*/
-  React__default.createElement(Icon, {
+  React__default.createElement(Icon$1, {
     icon: CalendarAlt
   }),
   maxDateMessage: null,
@@ -1833,7 +2025,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);
@@ -1950,7 +2142,7 @@ Tag.defaultProps = {
   variant: 'filled'
 };
 
-var Tooltip =
+var Tooltip$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -2070,7 +2262,7 @@ styles$5.makeStyles({
   }
 });
 
-var Select = function Select(props) {
+var Select$1 = function Select(props) {
   var options = props.options,
       value = props.value,
       onChange = props.onChange,
@@ -2145,7 +2337,7 @@ styles$5.createStyles({
     pointerEvents: 'none'
   }
 });
-var useCustomOptionStyle =
+var useCustomOptionStyle$1 =
 /*#__PURE__*/
 styles$5.makeStyles({
   container: {
@@ -2208,12 +2400,12 @@ var StyledSelect =
 styles$5.withStyles(styles$3)(MuiSelect$1);
 var StyledEmptyLabel =
 /*#__PURE__*/
-styles$5.withStyles(emptyStyles)(MuiListSubheader);
+styles$5.withStyles(emptyStyles)(MuiListSubheader$1);
 var StyledSubheader =
 /*#__PURE__*/
-styles$5.withStyles(subheaderStyles)(MuiListSubheader);
+styles$5.withStyles(subheaderStyles)(MuiListSubheader$1);
 
-var GroupSelect = function GroupSelect(props) {
+var GroupSelect$1 = function GroupSelect(props) {
   var groups = props.groups,
       value = props.value,
       onChange = props.onChange,
@@ -2221,7 +2413,7 @@ var GroupSelect = function GroupSelect(props) {
       variant = _props$variant === void 0 ? 'outlined' : _props$variant,
       onOpen = props.onOpen,
       onClose = props.onClose;
-  var classes = useCustomOptionStyle();
+  var classes = useCustomOptionStyle$1();
   return React__default.createElement(StyledSelect, {
     value: value,
     onChange: onChange,
@@ -2291,10 +2483,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;
   };
 
@@ -2304,7 +2496,7 @@ var InputStyle =
 /*#__PURE__*/
 styled('input')(
 /*#__PURE__*/
-_templateObject$2());
+_templateObject$3());
 var LabelStyle =
 /*#__PURE__*/
 styled('label')(
@@ -2332,7 +2524,7 @@ styled('span')(
 /*#__PURE__*/
 _templateObject5(), theme$1.color.text.B3, theme$1.typography.fontWeight.normal);
 
-var Switch =
+var Switch$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
@@ -2401,7 +2593,7 @@ var MenuList = function MenuList(_ref) {
     var TransitionProps = _ref2.TransitionProps;
 
     if (fade) {
-      return React__default.createElement(Fade, Object.assign({}, TransitionProps, {
+      return React__default.createElement(Fade$1, Object.assign({}, TransitionProps, {
         timeout: 400
       }), paper);
     } else {
@@ -2431,7 +2623,7 @@ styles$5.makeStyles({
   }
 });
 
-var MenuItem = function MenuItem(props) {
+var MenuItem$1 = function MenuItem(props) {
   var children = props.children,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "backgroundColor", "color", "hoverBackgroundColor", "hoverColor"]);
 
@@ -2471,7 +2663,7 @@ var StyledMuiToggleButton =
 /*#__PURE__*/
 styles$5.withStyles(styles$4)(MUIToggleButton);
 
-var ToggleButtonGroup = function ToggleButtonGroup(props) {
+var ToggleButtonGroup$1 = function ToggleButtonGroup(props) {
   var value = props.value,
       _props$exclusive = props.exclusive,
       exclusive = _props$exclusive === void 0 ? true : _props$exclusive,
@@ -2659,9 +2851,9 @@ var Pagination = function Pagination(_ref) {
   }), React__default.createElement(Box$1, {
     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,
@@ -2672,7 +2864,7 @@ var Pagination = function Pagination(_ref) {
   }));
 };
 
-var index$t = /*#__PURE__*/
+var index$2 = /*#__PURE__*/
 React.memo(Pagination);
 
 var useStyles$6 =
@@ -2881,10 +3073,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;
   };
 
@@ -2894,7 +3086,7 @@ var StepperContainer =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$3());
+_templateObject$4());
 var ConnectorContainer =
 /*#__PURE__*/
 emotion.css(
@@ -2922,7 +3114,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]);
@@ -2933,13 +3125,13 @@ React.forwardRef(function (_ref, ref) {
     className: StepperContainer
   }, restProps), stepsWithConnector);
 });
-var index$u = /*#__PURE__*/
+var index$3 = /*#__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;
   };
 
@@ -2949,7 +3141,7 @@ 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$1.color.text.B6 : theme$1.color.text.B3;
@@ -2983,13 +3175,13 @@ React.forwardRef(function (_ref, ref) {
     active: active
   }, restProps), children);
 });
-var index$v = /*#__PURE__*/
+var index$4 = /*#__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;
   };
 
@@ -2999,7 +3191,7 @@ var StyledEditableTable =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$5());
+_templateObject$6());
 
 var EditableTable = function EditableTable(_ref) {
   var rows = _ref.rows,
@@ -3644,7 +3836,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", {
@@ -3729,7 +3921,7 @@ var Modal = function Modal(_ref) {
     BackdropComponent: MUIBackdrop,
     BackdropProps: _extends({}, backdropProps),
     closeAfterTransition: true
-  }, restProps), React__default.createElement(Fade, {
+  }, restProps), React__default.createElement(Fade$1, {
     "in": open
   }, children));
 };
@@ -3791,10 +3983,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;
   };
 
@@ -3825,7 +4017,7 @@ var MessageWrapper =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$6());
+_templateObject$7());
 var MessageContent =
 /*#__PURE__*/
 emotion.css(
@@ -3874,28 +4066,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'
@@ -3925,12 +4117,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))),
@@ -3966,7 +4158,7 @@ React.forwardRef(function (_ref2, ref) {
   }));
 });
 
-var Backdrop =
+var Backdrop$1 =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
   return React__default.createElement(MUIBackdrop, Object.assign({
@@ -3974,7 +4166,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var Link = {
+var Link$1 = {
   name: 'list-ul-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -4002,10 +4194,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;
   };
 
@@ -4067,7 +4259,7 @@ var StyledSideMenu =
 /*#__PURE__*/
 styled.section(
 /*#__PURE__*/
-_templateObject$7(), duration, translateOffset, position, width, theme$1.zIndex.appBar);
+_templateObject$8(), duration, translateOffset, position, width, theme$1.zIndex.appBar);
 var StyledIconWrapper =
 /*#__PURE__*/
 styled.div(
@@ -4125,22 +4317,22 @@ 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,
     duration: duration,
     position: position,
     width: width
-  }, restProps), children), React__default.createElement(Backdrop, Object.assign({
+  }, restProps), children), React__default.createElement(Backdrop$1, Object.assign({
     open: open,
     onClick: handleClose,
     className: BackdropClassName
   }, restBackdropProps)));
 };
 
-var index$w = /*#__PURE__*/
+var index$5 = /*#__PURE__*/
 React.memo(SlidingSideMenu);
 
 var useStyles$b =
@@ -4198,10 +4390,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;
   };
 
@@ -4221,7 +4413,7 @@ var muiThemeForSurveyCake =
 /*#__PURE__*/
 function () {
   // Side Effects
-  emotion.injectGlobal(_templateObject$8());
+  emotion.injectGlobal(_templateObject$9());
   var BASE_FONT_SIZE = 16;
   return styles$5.createTheme({
     typography: {
@@ -5058,7 +5250,7 @@ var AngleRight$1 = {
   }
 };
 
-var Link$1 = {
+var Link$2 = {
   name: 'link-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -5432,7 +5624,7 @@ Object.defineProperty(exports, 'ThemeContext', {
 exports.AnimateHeight = AnimateHeight;
 exports.ArrowRight = ArrowRight;
 exports.Avatar = Avatar;
-exports.Backdrop = Backdrop;
+exports.Backdrop = Backdrop$1;
 exports.BrowserLight = BrowserLight;
 exports.Button = Button$1;
 exports.Card = Card;
@@ -5441,42 +5633,42 @@ exports.CardActions = CardActions;
 exports.CardContent = CardContent;
 exports.CardHeader = CardHeader;
 exports.Checkbox = MuiCheckbox;
-exports.Chip = index$s;
+exports.Chip = index$1;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.EditLight = EditLight;
 exports.EditableTable = EditableTable;
-exports.GroupSelect = GroupSelect;
-exports.Icon = Icon;
+exports.GroupSelect = GroupSelect$1;
+exports.Icon = Icon$1;
 exports.InputSlider = InputSlider;
 exports.KeyboardDatePicker = KeyboardDatePicker;
 exports.ListUlFilled = ListUl;
 exports.LockFilled = Lock;
-exports.MenuItem = MenuItem;
+exports.MenuItem = MenuItem$1;
 exports.MenuList = MenuList;
 exports.Message = api;
 exports.Modal = Modal;
 exports.MuiThemeProvider = MuiThemeProvider;
-exports.Pagination = index$t;
+exports.Pagination = index$2;
 exports.Paper = Paper;
 exports.Popper = Popper;
 exports.Portal = Portal;
 exports.QuestionCircleOutline = QuestionCircleOutline;
 exports.Radio = MuiRadio;
 exports.RadioGroup = Radio;
-exports.Select = Select;
-exports.SlidingSideMenu = index$w;
+exports.Select = Select$1;
+exports.SlidingSideMenu = index$5;
 exports.Snackbar = Snackbar;
-exports.Step = index$v;
-exports.Stepper = index$u;
-exports.Switch = Switch;
+exports.Step = index$4;
+exports.Stepper = index$3;
+exports.Switch = Switch$1;
 exports.Tab = Tab;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
-exports.ToggleButtonGroup = ToggleButtonGroup;
-exports.Tooltip = Tooltip;
-exports.Typography = Typography;
-exports.V2 = index$r;
+exports.ToggleButtonGroup = ToggleButtonGroup$1;
+exports.Tooltip = Tooltip$1;
+exports.Typography = Typography$1;
+exports.V2 = index;
 exports.WordingProvider = WordingProvider;
 exports.analyticsLight = AnalyticsLight;
 exports.angleLeftFilled = AngleLeft;
@@ -5524,10 +5716,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;