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

package/dist/rc.esm.js

@@ -1,9 +1,8 @@
 import MUICssBaseline from '@material-ui/core/CssBaseline';
 export { default as CssBaseline } from '@material-ui/core/CssBaseline';
-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 { createTheme, alpha, useTheme as useTheme$1, StylesProvider, ThemeProvider as ThemeProvider$2, makeStyles as makeStyles$1, createStyles, styled, withStyles } from '@material-ui/core/styles';
+import { createTheme, makeStyles as makeStyles$1, alpha, useTheme as useTheme$1, StylesProvider, ThemeProvider as ThemeProvider$2, createStyles, styled, withStyles } from '@material-ui/core/styles';
 import { rgba, lighten } from 'polished';
+import React, { forwardRef, useRef, useEffect, memo, useContext, useMemo, useState, useCallback, Children, isValidElement, cloneElement, useImperativeHandle, createRef, createContext } from 'react';
 import { ThemeProvider as ThemeProvider$1 } from 'emotion-theming';
 import MUIBackdrop from '@material-ui/core/Backdrop';
 import Box$1 from '@material-ui/core/Box';
@@ -15,37 +14,55 @@ import MUIDialogActions from '@material-ui/core/DialogActions';
 import MUIDialogContent from '@material-ui/core/DialogContent';
 import MUIDialogContentText from '@material-ui/core/DialogContentText';
 import MUIDialogTitle from '@material-ui/core/DialogTitle';
-import Fade from '@material-ui/core/Fade';
+import Fade$1 from '@material-ui/core/Fade';
 import MUIFormControl from '@material-ui/core/FormControl';
 import MUIFormControlLabel from '@material-ui/core/FormControlLabel';
 import MUIFormGroup from '@material-ui/core/FormGroup';
 import MUIFormHelperText from '@material-ui/core/FormHelperText';
 import MUIFormLabel from '@material-ui/core/FormLabel';
-import MUIIconButton from '@material-ui/core/IconButton';
-import MUILink from '@material-ui/core/Link';
-import MuiMenuItem$1 from '@material-ui/core/MenuItem';
-import MUIOutlinedInput from '@material-ui/core/OutlinedInput';
+import { css, cx, keyframes, injectGlobal } from 'emotion';
 import MuiSelect$1 from '@material-ui/core/Select';
+import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import Cancel from '@material-ui/icons/Cancel';
 import CheckCircle$2 from '@material-ui/icons/CheckCircle';
 import Close from '@material-ui/icons/Close';
+import Delete from '@material-ui/icons/Delete';
+import Edit from '@material-ui/icons/Edit';
+import FormatBold from '@material-ui/icons/FormatBold';
+import FormatColorFill from '@material-ui/icons/FormatColorFill';
+import FormatItalic from '@material-ui/icons/FormatItalic';
+import FormatUnderlined from '@material-ui/icons/FormatUnderlined';
+import Help from '@material-ui/icons/Help';
 import HelpOutline from '@material-ui/icons/HelpOutline';
+import Info from '@material-ui/icons/Info';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
+import Link$3 from '@material-ui/icons/Link';
+import NavigateNext from '@material-ui/icons/NavigateNext';
+import OpenInNew from '@material-ui/icons/OpenInNew';
 import ReportProblemRounded from '@material-ui/icons/ReportProblemRounded';
 import Schedule from '@material-ui/icons/Schedule';
-import Info$1 from '@material-ui/icons/Info';
+import Settings from '@material-ui/icons/Settings';
+import SettingsOutlined from '@material-ui/icons/SettingsOutlined';
+import WatchLater from '@material-ui/icons/WatchLater';
+import WebAsset from '@material-ui/icons/WebAsset';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import MuiListSubheader$1 from '@material-ui/core/ListSubheader';
+import MuiMenuItem$1 from '@material-ui/core/MenuItem';
+import Typography$2 from '@material-ui/core/Typography';
+import MUIIconButton from '@material-ui/core/IconButton';
+import MUILink from '@material-ui/core/Link';
+import MUIOutlinedInput from '@material-ui/core/OutlinedInput';
 import MUISwitch from '@material-ui/core/Switch';
 import MUITextField from '@material-ui/core/TextField';
 import MUIToggleButton from '@material-ui/lab/ToggleButton';
 import MUIToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import MUITooltip from '@material-ui/core/Tooltip';
-import Typography$1 from '@material-ui/core/Typography';
 import MuiAvatar from '@material-ui/core/Avatar';
 import Chip$1 from '@material-ui/core/Chip';
 import { alpha as alpha$1 } 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';
@@ -54,7 +71,6 @@ import { DatePicker as DatePicker$1, KeyboardDatePicker as KeyboardDatePicker$1,
 import styled$1 from '@emotion/styled';
 import { ThemeContext } from '@emotion/core';
 export { ThemeContext } from '@emotion/core';
-import MuiListSubheader from '@material-ui/core/ListSubheader';
 import Popper$1 from '@material-ui/core/Popper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import MuiMenuList from '@material-ui/core/MenuList';
@@ -74,72 +90,6 @@ import Slide from '@material-ui/core/Slide';
 import MuiDivider from '@material-ui/core/Divider';
 import DateFnsUtils from '@date-io/date-fns';
 
-var BrowserOutlined =
-/*#__PURE__*/
-forwardRef(function (props, ref) {
-  return React.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 24 24"
-  }), React.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__*/
-forwardRef(function (props, ref) {
-  return React.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React.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__*/
-forwardRef(function (props, ref) {
-  return React.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React.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__*/
-forwardRef(function (props, ref) {
-  return React.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 16 16"
-  }), React.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__*/
-forwardRef(function (props, ref) {
-  return React.createElement(SvgIcon, Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 0 512 512"
-  }), React.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__*/
 createTheme({
@@ -475,7 +425,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';
       }
     }
   }
@@ -492,7 +442,9 @@ var MuiMenuItem = {
     core.spacing(1) + "px",
     '&.Mui-selected': {
       color: core.palette.primary.main,
-      backgroundColor: 'initial',
+      backgroundColor:
+      /*#__PURE__*/
+      lighten(0.45, core.palette.primary.main),
       '&:hover': {
         backgroundColor:
         /*#__PURE__*/
@@ -548,6 +500,16 @@ var MuiOutlinedInput = {
   }
 };
 
+var useMenuStyles =
+/*#__PURE__*/
+makeStyles$1(function (theme) {
+  return {
+    root: {
+      boxShadow: 'none',
+      border: "1px solid " + theme.palette.primary.main
+    }
+  };
+});
 var MuiSelect = {
   root:
   /*#__PURE__*/
@@ -728,6 +690,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 useTheme$1();
+};
 var theme =
 /*#__PURE__*/
 createTheme({
@@ -749,7 +735,9 @@ createTheme({
     MuiToggleButton: MuiToggleButton,
     MuiToggleButtonGroup: MuiToggleButtonGroup,
     MuiTooltip: MuiTooltip,
-    MuiTypography: MuiTypography
+    MuiTypography: MuiTypography,
+    MuiList: MuiList,
+    MuiListSubheader: MuiListSubheader
   }
 }, core);
 
@@ -768,23 +756,25 @@ var PureThemeProvider = function PureThemeProvider(props) {
     theme: theme
   }, props.children);
 };
-var useMUITheme = function useMUITheme() {
-  return useTheme$1();
-};
 
-var index$1 = /*#__PURE__*/
-forwardRef(function Backdrop(props, ref) {
+var Backdrop =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIBackdrop, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+Backdrop.displayName = 'Backdrop';
 
-function Box(props) {
+var Box = function Box(props) {
   return React.createElement(Box$1, Object.assign({}, props), props.children);
-}
+};
 
-var Button = /*#__PURE__*/
-forwardRef(function Button(props, ref) {
+Box.displayName = 'Box';
+
+var Button =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   var _props$size = props.size,
       size = _props$size === void 0 ? 'small' : _props$size,
       _props$disableElevati = props.disableElevation,
@@ -797,176 +787,181 @@ forwardRef(function Button(props, ref) {
     size: size
   }));
 });
+Button.displayName = 'Button';
 
-var index$2 = /*#__PURE__*/
-forwardRef(function ButtonGroup(props, ref) {
+var ButtonGroup =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIButtonGroup, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+ButtonGroup.displayName = 'ButtonGroup';
 
-var CircularProgress = /*#__PURE__*/
-forwardRef(function CircularProgress(props, ref) {
+var CircularProgress =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUICircularProgress, Object.assign({}, props, {
     ref: ref
   }));
 });
+CircularProgress.displayName = 'CircularProgress';
 
-function CssBaseline(props) {
+var CssBaseline = function CssBaseline(props) {
   return React.createElement(MUICssBaseline, Object.assign({}, props), props.children);
-}
+};
 
-var index$3 = /*#__PURE__*/
-forwardRef(function Dialog(props, ref) {
+var Dialog =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   var rest = _objectWithoutPropertiesLoose(props, ["disableBackdropClick", "onBackdropClick", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "onRendered"]);
 
   return React.createElement(MUIDialog, Object.assign({}, rest, {
     ref: ref
   }), props.children);
 });
+Dialog.displayName = 'Dialog';
 
-var index$4 = /*#__PURE__*/
-forwardRef(function DialogActions(props, ref) {
+var DialogActions =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIDialogActions, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogActions.displayName = 'DialogActions';
 
-var index$5 = /*#__PURE__*/
-forwardRef(function DialogContent(props, ref) {
+var DialogContent =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIDialogContent, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogContent.displayName = 'DialogContent';
 
-var index$6 = /*#__PURE__*/
-forwardRef(function DialogContentText(props, ref) {
+var DialogContentText =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIDialogContentText, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogContentText.displayName = 'DialogContentText';
 
-var index$7 = /*#__PURE__*/
-forwardRef(function DialogTitle(props, ref) {
+var DialogTitle =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIDialogTitle, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+DialogTitle.displayName = 'DialogTitle';
 
-var index$8 = /*#__PURE__*/
-forwardRef(function Fade$1(props, ref) {
-  return React.createElement(Fade, Object.assign({}, props, {
+var Fade =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  return React.createElement(Fade$1, Object.assign({}, props, {
     ref: ref
   }));
 });
+Fade.displayName = 'Fade';
 
-var index$9 = /*#__PURE__*/
-forwardRef(function FormControl(props, ref) {
+var FormControl =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIFormControl, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+FormControl.displayName = 'FormControl';
 
-var index$a = /*#__PURE__*/
-forwardRef(function FormControlLabel(props, ref) {
+var FormControlLabel =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIFormControlLabel, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormControlLabel.displayName = 'FormControlLabel';
 
-var index$b = /*#__PURE__*/
-forwardRef(function FormGroup(props, ref) {
+var FormGroup =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIFormGroup, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormGroup.displayName = 'FormGroup';
 
-var index$c = /*#__PURE__*/
-forwardRef(function FormHelperText(props, ref) {
+var FormHelperText =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIFormHelperText, Object.assign({}, props, {
     ref: ref
   }));
 });
+FormHelperText.displayName = 'FormHelperText';
 
-var index$d = /*#__PURE__*/
-forwardRef(function FormLabel(props, ref) {
+var FormLabel =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   var rest = _extends({}, props);
 
   return React.createElement(MUIFormLabel, Object.assign({}, rest, {
     ref: ref
   }), props.children);
 });
+FormLabel.displayName = 'FormLabel';
 
-var index$e = /*#__PURE__*/
-forwardRef(function IconButton(props, ref) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'small' : _props$size,
-      rest = _objectWithoutPropertiesLoose(props, ["size"]);
-
-  return React.createElement(MUIIconButton, Object.assign({}, rest, {
-    ref: ref,
-    size: size
-  }));
-});
-
-var index$f = /*#__PURE__*/
-forwardRef(function Link(props, ref) {
-  var _props$underline = props.underline,
-      underline = _props$underline === void 0 ? 'none' : _props$underline,
-      rest = _objectWithoutPropertiesLoose(props, ["underline"]);
-
-  return React.createElement(MUILink, Object.assign({}, rest, {
+var FilterAlt =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  return React.createElement(SvgIcon, Object.assign({}, props, {
     ref: ref,
-    underline: underline
-  }));
-});
-
-var index$g = /*#__PURE__*/
-forwardRef(function LoadingButton(props, ref) {
-  var _props$loading = props.loading,
-      loading = _props$loading === void 0 ? true : _props$loading,
-      rest = _objectWithoutPropertiesLoose(props, ["loading"]);
-
-  return React.createElement(Button, Object.assign({}, rest, {
-    startIcon: loading && React.createElement(CircularProgress, {
-      size: "1rem",
-      color: "inherit"
-    }),
-    ref: ref
-  }));
-});
-
-var index$h = /*#__PURE__*/
-forwardRef(function MenuItem(props, ref) {
-  var rest = _objectWithoutPropertiesLoose(props, ["button"]);
-
-  return React.createElement(MuiMenuItem$1, Object.assign({}, rest, {
-    ref: ref
-  }), props.children);
-});
-
-var index$i = /*#__PURE__*/
-forwardRef(function OutlinedInput(props, ref) {
-  return React.createElement(MUIOutlinedInput, Object.assign({}, props, {
-    ref: ref
-  }));
+    viewBox: "0 0 24 24"
+  }), React.createElement("g", null, React.createElement("path", {
+    d: "M0,0h24 M24,24H0",
+    fill: "none"
+  }), React.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.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__*/
-forwardRef(function Icon(props, ref) {
+var Icon =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   var name = props.name,
       rest = _objectWithoutPropertiesLoose(props, ["name"]);
 
@@ -975,19 +970,11 @@ forwardRef(function Icon(props, ref) {
     ref: ref
   }));
 });
+Icon.displayName = 'Icon';
 
-var useMenuStyles =
+var Select =
 /*#__PURE__*/
-makeStyles$1(function (theme) {
-  return {
-    root: {
-      boxShadow: 'none',
-      border: "1px solid " + theme.palette.primary.main
-    }
-  };
-});
-var index$k = /*#__PURE__*/
-forwardRef(function Select(props, ref) {
+forwardRef(function (props, ref) {
   var theme = useMUITheme();
 
   var _useMenuStyles = useMenuStyles(),
@@ -1012,9 +999,217 @@ forwardRef(function Select(props, ref) {
     }
   }), props.children);
 });
+Select.displayName = 'Select';
+
+var ListSubheader =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  var _props$disableGutters = props.disableGutters,
+      disableGutters = _props$disableGutters === void 0 ? true : _props$disableGutters,
+      rest = _objectWithoutPropertiesLoose(props, ["disableGutters"]);
+
+  return React.createElement(MuiListSubheader$1, Object.assign({}, rest, {
+    ref: ref,
+    disableGutters: disableGutters
+  }), props.children);
+});
+ListSubheader.displayName = 'ListSubheader';
 
-var index$l = /*#__PURE__*/
-forwardRef(function Switch(props, ref) {
+var MenuItem =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  var rest = _objectWithoutPropertiesLoose(props, ["button"]);
+
+  return React.createElement(MuiMenuItem$1, Object.assign({}, rest, {
+    ref: ref
+  }), props.children);
+});
+MenuItem.displayName = 'MenuItem';
+
+var Typography =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  return React.createElement(Typography$2, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+Typography.displayName = 'Typography';
+
+var useSelectStyle =
+/*#__PURE__*/
+makeStyles$1(function () {
+  return {
+    select: {
+      padding: '5px 8px',
+      display: 'inline-flex'
+    }
+  };
+});
+var useCustomOptionStyle =
+/*#__PURE__*/
+makeStyles$1(function (theme) {
+  return {
+    container: {
+      backgroundColor: theme.palette.common.white,
+      '&:hover': {
+        backgroundColor: lighten(0.3, theme.palette.primary.main),
+        '& > div': {
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.common.white
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: 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__*/
+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.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.createElement(ListSubheader, {
+      style: {
+        pointerEvents: 'none'
+      }
+    }, group.groupTitle), group.options.map(function (opt) {
+      if (opt.emptyLabel) {
+        return React.createElement(MenuItem, {
+          style: {
+            pointerEvents: 'none'
+          }
+        }, React.createElement(Typography, {
+          variant: "body2",
+          className: css(_templateObject(), theme.palette.grey[500])
+        }, opt.emptyLabel));
+      }
+
+      return React.createElement(MenuItem, {
+        className: customOptionStyle.container,
+        value: opt.value,
+        key: opt.value
+      }, React.createElement("div", {
+        className: cx(customOptionStyle.root, customOptionStyle[group.optionType])
+      }, opt.children));
+    })];
+  }));
+});
+GroupSelect.displayName = 'GroupSelect';
+
+var IconButton =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      rest = _objectWithoutPropertiesLoose(props, ["size"]);
+
+  return React.createElement(MUIIconButton, Object.assign({}, rest, {
+    ref: ref,
+    size: size
+  }));
+});
+IconButton.displayName = 'IconButton';
+
+var Link =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  var _props$underline = props.underline,
+      underline = _props$underline === void 0 ? 'none' : _props$underline,
+      rest = _objectWithoutPropertiesLoose(props, ["underline"]);
+
+  return React.createElement(MUILink, Object.assign({}, rest, {
+    ref: ref,
+    underline: underline
+  }));
+});
+Link.displayName = 'Link';
+
+var LoadingButton =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
+  var _props$loading = props.loading,
+      loading = _props$loading === void 0 ? true : _props$loading,
+      rest = _objectWithoutPropertiesLoose(props, ["loading"]);
+
+  return React.createElement(Button, Object.assign({}, rest, {
+    startIcon: loading && React.createElement(CircularProgress, {
+      size: "1rem",
+      color: "inherit"
+    }),
+    ref: ref
+  }));
+});
+LoadingButton.displayName = 'LoadingButton';
+
+var OutlinedInput =
+/*#__PURE__*/
+forwardRef(function OutlinedInput(props, ref) {
+  return React.createElement(MUIOutlinedInput, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+OutlinedInput.displayName = 'OutlinedInput';
+
+var Switch =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   var _props$color = props.color,
       color = _props$color === void 0 ? 'default' : _props$color,
       rest = _objectWithoutPropertiesLoose(props, ["color"]);
@@ -1024,86 +1219,83 @@ forwardRef(function Switch(props, ref) {
     color: color
   }));
 });
+Switch.displayName = 'Switch';
 
-var index$m = /*#__PURE__*/
-forwardRef(function TextField(props, ref) {
+var TextField =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUITextField, Object.assign({}, props, {
     ref: ref
   }));
 });
+TextField.displayName = 'TextField';
 
-var index$n = /*#__PURE__*/
-forwardRef(function ToggleButton(props, ref) {
+var ToggleButton =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIToggleButton, Object.assign({}, props, {
     ref: ref
   }));
 });
+ToggleButton.displayName = 'ToggleButton';
 
-var index$o = /*#__PURE__*/
-forwardRef(function ToggleButtonGroup(props, ref) {
+var ToggleButtonGroup =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUIToggleButtonGroup, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
-var index$p = /*#__PURE__*/
-forwardRef(function Tooltip(props, ref) {
+var Tooltip =
+/*#__PURE__*/
+forwardRef(function (props, ref) {
   return React.createElement(MUITooltip, Object.assign({}, props, {
     ref: ref
   }), props.children);
 });
-
-var index$q = /*#__PURE__*/
-forwardRef(function Typography(props, ref) {
-  var _props$color = props.color,
-      color = _props$color === void 0 ? 'textPrimary' : _props$color,
-      rest = _objectWithoutPropertiesLoose(props, ["color"]);
-
-  return React.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) {
@@ -1405,7 +1597,7 @@ var Chip = function Chip(_ref) {
   );
 };
 
-var index$s = /*#__PURE__*/
+var index$1 = /*#__PURE__*/
 memo(Chip);
 
 var Paper =
@@ -1466,10 +1658,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;
   };
 
@@ -1479,7 +1671,7 @@ var loadingCircle =
 /*#__PURE__*/
 keyframes(
 /*#__PURE__*/
-_templateObject());
+_templateObject$1());
 var spin =
 /*#__PURE__*/
 css(
@@ -1492,7 +1684,7 @@ 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 className = _ref.className,
@@ -1534,7 +1726,7 @@ forwardRef(function (_ref, ref) {
     d: icon.definition.pathData
   }));
 });
-Icon.defaultProps = {
+Icon$1.defaultProps = {
   size: 1
 };
 
@@ -1556,10 +1748,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;
   };
 
@@ -1569,7 +1761,7 @@ var DatePickerWrapper =
 /*#__PURE__*/
 styled$1('section')(
 /*#__PURE__*/
-_templateObject$1());
+_templateObject$2());
 var IonwWrapper =
 /*#__PURE__*/
 styled$1('section')(
@@ -1645,7 +1837,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,
@@ -1737,7 +1929,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,
@@ -1755,7 +1947,7 @@ forwardRef(function (_ref, ref) {
     ref: ref
   }), children);
 });
-Typography.defaultProps = {
+Typography$1.defaultProps = {
   weight: 'normal',
   gutterBottom: false,
   noWrap: false
@@ -1809,7 +2001,7 @@ makeStyles$1(inputAdornmentStyles);
 var CommonKeyboardDatePickerProps = {
   keyboardIcon:
   /*#__PURE__*/
-  React.createElement(Icon, {
+  React.createElement(Icon$1, {
     icon: CalendarAlt
   }),
   maxDateMessage: null,
@@ -1828,7 +2020,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);
@@ -1945,7 +2137,7 @@ Tag.defaultProps = {
   variant: 'filled'
 };
 
-var Tooltip =
+var Tooltip$1 =
 /*#__PURE__*/
 forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -2065,7 +2257,7 @@ makeStyles$1({
   }
 });
 
-var Select = function Select(props) {
+var Select$1 = function Select(props) {
   var options = props.options,
       value = props.value,
       onChange = props.onChange,
@@ -2140,7 +2332,7 @@ createStyles({
     pointerEvents: 'none'
   }
 });
-var useCustomOptionStyle =
+var useCustomOptionStyle$1 =
 /*#__PURE__*/
 makeStyles$1({
   container: {
@@ -2203,12 +2395,12 @@ var StyledSelect =
 withStyles(styles$3)(MuiSelect$1);
 var StyledEmptyLabel =
 /*#__PURE__*/
-withStyles(emptyStyles)(MuiListSubheader);
+withStyles(emptyStyles)(MuiListSubheader$1);
 var StyledSubheader =
 /*#__PURE__*/
-withStyles(subheaderStyles)(MuiListSubheader);
+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,
@@ -2216,7 +2408,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.createElement(StyledSelect, {
     value: value,
     onChange: onChange,
@@ -2286,10 +2478,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;
   };
 
@@ -2299,7 +2491,7 @@ var InputStyle =
 /*#__PURE__*/
 styled$1('input')(
 /*#__PURE__*/
-_templateObject$2());
+_templateObject$3());
 var LabelStyle =
 /*#__PURE__*/
 styled$1('label')(
@@ -2327,7 +2519,7 @@ styled$1('span')(
 /*#__PURE__*/
 _templateObject5(), theme$1.color.text.B3, theme$1.typography.fontWeight.normal);
 
-var Switch =
+var Switch$1 =
 /*#__PURE__*/
 forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
@@ -2396,7 +2588,7 @@ var MenuList = function MenuList(_ref) {
     var TransitionProps = _ref2.TransitionProps;
 
     if (fade) {
-      return React.createElement(Fade, Object.assign({}, TransitionProps, {
+      return React.createElement(Fade$1, Object.assign({}, TransitionProps, {
         timeout: 400
       }), paper);
     } else {
@@ -2426,7 +2618,7 @@ makeStyles$1({
   }
 });
 
-var MenuItem = function MenuItem(props) {
+var MenuItem$1 = function MenuItem(props) {
   var children = props.children,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "backgroundColor", "color", "hoverBackgroundColor", "hoverColor"]);
 
@@ -2466,7 +2658,7 @@ var StyledMuiToggleButton =
 /*#__PURE__*/
 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,
@@ -2654,9 +2846,9 @@ var Pagination = function Pagination(_ref) {
   }), React.createElement(Box$1, {
     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,
@@ -2667,7 +2859,7 @@ var Pagination = function Pagination(_ref) {
   }));
 };
 
-var index$t = /*#__PURE__*/
+var index$2 = /*#__PURE__*/
 memo(Pagination);
 
 var useStyles$6 =
@@ -2876,10 +3068,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;
   };
 
@@ -2889,7 +3081,7 @@ var StepperContainer =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$3());
+_templateObject$4());
 var ConnectorContainer =
 /*#__PURE__*/
 css(
@@ -2917,7 +3109,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]);
@@ -2928,13 +3120,13 @@ forwardRef(function (_ref, ref) {
     className: StepperContainer
   }, restProps), stepsWithConnector);
 });
-var index$u = /*#__PURE__*/
+var index$3 = /*#__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;
   };
 
@@ -2944,7 +3136,7 @@ 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$1.color.text.B6 : theme$1.color.text.B3;
@@ -2978,13 +3170,13 @@ forwardRef(function (_ref, ref) {
     active: active
   }, restProps), children);
 });
-var index$v = /*#__PURE__*/
+var index$4 = /*#__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;
   };
 
@@ -2994,7 +3186,7 @@ var StyledEditableTable =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$5());
+_templateObject$6());
 
 var EditableTable = function EditableTable(_ref) {
   var rows = _ref.rows,
@@ -3639,7 +3831,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", {
@@ -3724,7 +3916,7 @@ var Modal = function Modal(_ref) {
     BackdropComponent: MUIBackdrop,
     BackdropProps: _extends({}, backdropProps),
     closeAfterTransition: true
-  }, restProps), React.createElement(Fade, {
+  }, restProps), React.createElement(Fade$1, {
     "in": open
   }, children));
 };
@@ -3786,10 +3978,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;
   };
 
@@ -3820,7 +4012,7 @@ var MessageWrapper =
 /*#__PURE__*/
 css(
 /*#__PURE__*/
-_templateObject$6());
+_templateObject$7());
 var MessageContent =
 /*#__PURE__*/
 css(
@@ -3869,28 +4061,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'
@@ -3920,12 +4112,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))),
@@ -3961,7 +4153,7 @@ forwardRef(function (_ref2, ref) {
   }));
 });
 
-var Backdrop =
+var Backdrop$1 =
 /*#__PURE__*/
 forwardRef(function (props, ref) {
   return React.createElement(MUIBackdrop, Object.assign({
@@ -3969,7 +4161,7 @@ forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var Link = {
+var Link$1 = {
   name: 'list-ul-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -3997,10 +4189,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;
   };
 
@@ -4062,7 +4254,7 @@ var StyledSideMenu =
 /*#__PURE__*/
 styled$1.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$1.div(
@@ -4120,22 +4312,22 @@ 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,
     duration: duration,
     position: position,
     width: width
-  }, restProps), children), React.createElement(Backdrop, Object.assign({
+  }, restProps), children), React.createElement(Backdrop$1, Object.assign({
     open: open,
     onClick: handleClose,
     className: BackdropClassName
   }, restBackdropProps)));
 };
 
-var index$w = /*#__PURE__*/
+var index$5 = /*#__PURE__*/
 memo(SlidingSideMenu);
 
 var useStyles$b =
@@ -4193,10 +4385,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;
   };
 
@@ -4216,7 +4408,7 @@ var muiThemeForSurveyCake =
 /*#__PURE__*/
 function () {
   // Side Effects
-  injectGlobal(_templateObject$8());
+  injectGlobal(_templateObject$9());
   var BASE_FONT_SIZE = 16;
   return createTheme({
     typography: {
@@ -5053,7 +5245,7 @@ var AngleRight$1 = {
   }
 };
 
-var Link$1 = {
+var Link$2 = {
   name: 'link-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -5417,5 +5609,5 @@ WordingProvider.useWording = function () {
   return useContext(WordingContext);
 };
 
-export { AnimateHeight, ArrowRight, Avatar, Backdrop, BrowserLight, Button$1 as Button, Card, CardActionArea, CardActions, CardContent, CardHeader, MuiCheckbox as Checkbox, index$s as Chip, DatePicker, Divider, EditLight, EditableTable, GroupSelect, Icon, InputSlider, KeyboardDatePicker, ListUl as ListUlFilled, Lock as LockFilled, MenuItem, MenuList, api as Message, Modal, MuiThemeProvider, index$t as Pagination, Paper, Popper, Portal, QuestionCircleOutline, MuiRadio as Radio, Radio as RadioGroup, Select, index$w as SlidingSideMenu, Snackbar, index$v as Step, index$u as Stepper, Switch, Tab, Tabs, Tag, ToggleButtonGroup, Tooltip, Typography, index$r 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 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$1 as Backdrop, BrowserLight, Button$1 as Button, Card, CardActionArea, CardActions, CardContent, CardHeader, MuiCheckbox as Checkbox, index$1 as Chip, DatePicker, Divider, EditLight, EditableTable, GroupSelect$1 as GroupSelect, Icon$1 as Icon, InputSlider, KeyboardDatePicker, ListUl as ListUlFilled, Lock as LockFilled, MenuItem$1 as MenuItem, MenuList, api as Message, Modal, MuiThemeProvider, index$2 as Pagination, Paper, Popper, Portal, QuestionCircleOutline, MuiRadio as Radio, Radio as RadioGroup, Select$1 as Select, index$5 as SlidingSideMenu, Snackbar, index$4 as Step, index$3 as Stepper, Switch$1 as Switch, Tab, Tabs, Tag, ToggleButtonGroup$1 as ToggleButtonGroup, Tooltip$1 as Tooltip, Typography$1 as Typography, index 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 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