exports.id = 893; exports.ids = [893]; exports.modules = { /***/ 282: /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; /* unused harmony export styles */ /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7375); /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2122); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9297); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4229); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3536); /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(clsx__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2543); /* harmony import */ var _styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9693); /* harmony import */ var _ButtonBase__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8491); /* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3871); var styles = function styles(theme) { return { /* Styles applied to the root element. */ root: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__/* .default */ .Z)({}, theme.typography.button, { boxSizing: 'border-box', minWidth: 64, padding: '6px 16px', borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], { duration: theme.transitions.duration.short }), '&:hover': { textDecoration: 'none', backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.text.primary, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' }, '&$disabled': { backgroundColor: 'transparent' } }, '&$disabled': { color: theme.palette.action.disabled } }), /* Styles applied to the span element that wraps the children. */ label: { width: '100%', // Ensure the correct width for iOS Safari display: 'inherit', alignItems: 'inherit', justifyContent: 'inherit' }, /* Styles applied to the root element if `variant="text"`. */ text: { padding: '6px 8px' }, /* Styles applied to the root element if `variant="text"` and `color="primary"`. */ textPrimary: { color: theme.palette.primary.main, '&:hover': { backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */ textSecondary: { color: theme.palette.secondary.main, '&:hover': { backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="outlined"`. */ outlined: { padding: '5px 15px', border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'), '&$disabled': { border: "1px solid ".concat(theme.palette.action.disabledBackground) } }, /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: { color: theme.palette.primary.main, border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.primary.main, 0.5)), '&:hover': { border: "1px solid ".concat(theme.palette.primary.main), backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: { color: theme.palette.secondary.main, border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.secondary.main, 0.5)), '&:hover': { border: "1px solid ".concat(theme.palette.secondary.main), backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_4__/* .fade */ .U1)(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } }, '&$disabled': { border: "1px solid ".concat(theme.palette.action.disabled) } }, /* Styles applied to the root element if `variant="contained"`. */ contained: { color: theme.palette.getContrastText(theme.palette.grey[300]), backgroundColor: theme.palette.grey[300], boxShadow: theme.shadows[2], '&:hover': { backgroundColor: theme.palette.grey.A100, boxShadow: theme.shadows[4], // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { boxShadow: theme.shadows[2], backgroundColor: theme.palette.grey[300] }, '&$disabled': { backgroundColor: theme.palette.action.disabledBackground } }, '&$focusVisible': { boxShadow: theme.shadows[6] }, '&:active': { boxShadow: theme.shadows[8] }, '&$disabled': { color: theme.palette.action.disabled, boxShadow: theme.shadows[0], backgroundColor: theme.palette.action.disabledBackground } }, /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ containedPrimary: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, '&:hover': { backgroundColor: theme.palette.primary.dark, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.primary.main } } }, /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ containedSecondary: { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.main, '&:hover': { backgroundColor: theme.palette.secondary.dark, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.secondary.main } } }, /* Styles applied to the root element if `disableElevation={true}`. */ disableElevation: { boxShadow: 'none', '&:hover': { boxShadow: 'none' }, '&$focusVisible': { boxShadow: 'none' }, '&:active': { boxShadow: 'none' }, '&$disabled': { boxShadow: 'none' } }, /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */ focusVisible: {}, /* Pseudo-class applied to the root element if `disabled={true}`. */ disabled: {}, /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', borderColor: 'currentColor' }, /* Styles applied to the root element if `size="small"` and `variant="text"`. */ textSizeSmall: { padding: '4px 5px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="text"`. */ textSizeLarge: { padding: '8px 11px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */ outlinedSizeSmall: { padding: '3px 9px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */ outlinedSizeLarge: { padding: '7px 21px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"` and `variant="contained"`. */ containedSizeSmall: { padding: '4px 10px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="contained"`. */ containedSizeLarge: { padding: '8px 22px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"`. */ sizeSmall: {}, /* Styles applied to the root element if `size="large"`. */ sizeLarge: {}, /* Styles applied to the root element if `fullWidth={true}`. */ fullWidth: { width: '100%' }, /* Styles applied to the startIcon element if supplied. */ startIcon: { display: 'inherit', marginRight: 8, marginLeft: -4, '&$iconSizeSmall': { marginLeft: -2 } }, /* Styles applied to the endIcon element if supplied. */ endIcon: { display: 'inherit', marginRight: -4, marginLeft: 8, '&$iconSizeSmall': { marginRight: -2 } }, /* Styles applied to the icon element if supplied and `size="small"`. */ iconSizeSmall: { '& > *:first-child': { fontSize: 18 } }, /* Styles applied to the icon element if supplied and `size="medium"`. */ iconSizeMedium: { '& > *:first-child': { fontSize: 20 } }, /* Styles applied to the icon element if supplied and `size="large"`. */ iconSizeLarge: { '& > *:first-child': { fontSize: 22 } } }; }; var Button = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(function Button(props, ref) { var children = props.children, classes = props.classes, className = props.className, _props$color = props.color, color = _props$color === void 0 ? 'default' : _props$color, _props$component = props.component, component = _props$component === void 0 ? 'button' : _props$component, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? false : _props$disabled, _props$disableElevati = props.disableElevation, disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati, _props$disableFocusRi = props.disableFocusRipple, disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi, endIconProp = props.endIcon, focusVisibleClassName = props.focusVisibleClassName, _props$fullWidth = props.fullWidth, fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth, _props$size = props.size, size = _props$size === void 0 ? 'medium' : _props$size, startIconProp = props.startIcon, _props$type = props.type, type = _props$type === void 0 ? 'button' : _props$type, _props$variant = props.variant, variant = _props$variant === void 0 ? 'text' : _props$variant, other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_5__/* .default */ .Z)(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]); var startIcon = startIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: clsx__WEBPACK_IMPORTED_MODULE_2___default()(classes.startIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__/* .default */ .Z)(size))]) }, startIconProp); var endIcon = endIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: clsx__WEBPACK_IMPORTED_MODULE_2___default()(classes.endIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__/* .default */ .Z)(size))]) }, endIconProp); return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ButtonBase__WEBPACK_IMPORTED_MODULE_7__/* .default */ .Z, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_3__/* .default */ .Z)({ className: clsx__WEBPACK_IMPORTED_MODULE_2___default()(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes["".concat(variant).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__/* .default */ .Z)(color))], size !== 'medium' && [classes["".concat(variant, "Size").concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__/* .default */ .Z)(size))], classes["size".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__/* .default */ .Z)(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth), component: component, disabled: disabled, focusRipple: !disableFocusRipple, focusVisibleClassName: clsx__WEBPACK_IMPORTED_MODULE_2___default()(classes.focusVisible, focusVisibleClassName), ref: ref, type: type }, other), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", { className: classes.label }, startIcon, children, endIcon)); }); false ? 0 : void 0; /* harmony default export */ __webpack_exports__["Z"] = ((0,_styles_withStyles__WEBPACK_IMPORTED_MODULE_8__/* .default */ .Z)(styles, { name: 'MuiButton' })(Button)); /***/ }), /***/ 8491: /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": function() { return /* binding */ ButtonBase_ButtonBase; } }); // UNUSED EXPORTS: styles // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js var esm_extends = __webpack_require__(2122); // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js + 1 modules var objectWithoutProperties = __webpack_require__(7375); // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__(9297); // EXTERNAL MODULE: external "prop-types" var external_prop_types_ = __webpack_require__(4229); // EXTERNAL MODULE: external "react-dom" var external_react_dom_ = __webpack_require__(2268); // EXTERNAL MODULE: external "clsx" var external_clsx_ = __webpack_require__(3536); var external_clsx_default = /*#__PURE__*/__webpack_require__.n(external_clsx_); // EXTERNAL MODULE: external "@material-ui/utils" var utils_ = __webpack_require__(2958); ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/utils/setRef.js // TODO v5: consider to make it private function setRef(ref, value) { if (typeof ref === 'function') { ref(value); } else if (ref) { ref.current = value; } } ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/utils/useForkRef.js function useForkRef(refA, refB) { /** * This will create a new function if the ref props change and are defined. * This means react will call the old forkRef with `null` and the new forkRef * with the ref. Cleanup naturally emerges from this behavior */ return external_react_.useMemo(function () { if (refA == null && refB == null) { return null; } return function (refValue) { setRef(refA, refValue); setRef(refB, refValue); }; }, [refA, refB]); } ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/utils/useEventCallback.js var useEnhancedEffect = typeof window !== 'undefined' ? external_react_.useLayoutEffect : external_react_.useEffect; /** * https://github.com/facebook/react/issues/14099#issuecomment-440013892 * * @param {function} fn */ function useEventCallback(fn) { var ref = external_react_.useRef(fn); useEnhancedEffect(function () { ref.current = fn; }); return external_react_.useCallback(function () { return (0, ref.current).apply(void 0, arguments); }, []); } // EXTERNAL MODULE: ./node_modules/@material-ui/core/esm/styles/withStyles.js var withStyles = __webpack_require__(2543); ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/utils/useIsFocusVisible.js // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js var hadKeyboardEvent = true; var hadFocusVisibleRecently = false; var hadFocusVisibleRecentlyTimeout = null; var inputTypesWhitelist = { text: true, search: true, url: true, tel: true, email: true, password: true, number: true, date: true, month: true, week: true, time: true, datetime: true, 'datetime-local': true }; /** * Computes whether the given element should automatically trigger the * `focus-visible` class being added, i.e. whether it should always match * `:focus-visible` when focused. * @param {Element} node * @return {boolean} */ function focusTriggersKeyboardModality(node) { var type = node.type, tagName = node.tagName; if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) { return true; } if (tagName === 'TEXTAREA' && !node.readOnly) { return true; } if (node.isContentEditable) { return true; } return false; } /** * Keep track of our keyboard modality state with `hadKeyboardEvent`. * If the most recent user interaction was via the keyboard; * and the key press did not include a meta, alt/option, or control key; * then the modality is keyboard. Otherwise, the modality is not keyboard. * @param {KeyboardEvent} event */ function handleKeyDown(event) { if (event.metaKey || event.altKey || event.ctrlKey) { return; } hadKeyboardEvent = true; } /** * If at any point a user clicks with a pointing device, ensure that we change * the modality away from keyboard. * This avoids the situation where a user presses a key on an already focused * element, and then clicks on a different element, focusing it with a * pointing device, while we still think we're in keyboard modality. */ function handlePointerDown() { hadKeyboardEvent = false; } function handleVisibilityChange() { if (this.visibilityState === 'hidden') { // If the tab becomes active again, the browser will handle calling focus // on the element (Safari actually calls it twice). // If this tab change caused a blur on an element with focus-visible, // re-apply the class when the user switches back to the tab. if (hadFocusVisibleRecently) { hadKeyboardEvent = true; } } } function prepare(doc) { doc.addEventListener('keydown', handleKeyDown, true); doc.addEventListener('mousedown', handlePointerDown, true); doc.addEventListener('pointerdown', handlePointerDown, true); doc.addEventListener('touchstart', handlePointerDown, true); doc.addEventListener('visibilitychange', handleVisibilityChange, true); } function teardown(doc) { doc.removeEventListener('keydown', handleKeyDown, true); doc.removeEventListener('mousedown', handlePointerDown, true); doc.removeEventListener('pointerdown', handlePointerDown, true); doc.removeEventListener('touchstart', handlePointerDown, true); doc.removeEventListener('visibilitychange', handleVisibilityChange, true); } function isFocusVisible(event) { var target = event.target; try { return target.matches(':focus-visible'); } catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError // we use our own heuristic for those browsers // rethrow might be better if it's not the expected error but do we really // want to crash if focus-visible malfunctioned? // no need for validFocusTarget check. the user does that by attaching it to // focusable events only return hadKeyboardEvent || focusTriggersKeyboardModality(target); } /** * Should be called if a blur event is fired on a focus-visible element */ function handleBlurVisible() { // To detect a tab/window switch, we look for a blur event followed // rapidly by a visibility change. // If we don't see a visibility change within 100ms, it's probably a // regular focus change. hadFocusVisibleRecently = true; window.clearTimeout(hadFocusVisibleRecentlyTimeout); hadFocusVisibleRecentlyTimeout = window.setTimeout(function () { hadFocusVisibleRecently = false; }, 100); } function useIsFocusVisible() { var ref = external_react_.useCallback(function (instance) { var node = external_react_dom_.findDOMNode(instance); if (node != null) { prepare(node.ownerDocument); } }, []); if (false) {} return { isFocusVisible: isFocusVisible, onBlurVisible: handleBlurVisible, ref: ref }; } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } // EXTERNAL MODULE: external "react-transition-group" var external_react_transition_group_ = __webpack_require__(3810); ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/ButtonBase/Ripple.js var Ripple_useEnhancedEffect = typeof window === 'undefined' ? external_react_.useEffect : external_react_.useLayoutEffect; /** * @ignore - internal component. */ function Ripple(props) { var classes = props.classes, _props$pulsate = props.pulsate, pulsate = _props$pulsate === void 0 ? false : _props$pulsate, rippleX = props.rippleX, rippleY = props.rippleY, rippleSize = props.rippleSize, inProp = props.in, _props$onExited = props.onExited, onExited = _props$onExited === void 0 ? function () {} : _props$onExited, timeout = props.timeout; var _React$useState = external_react_.useState(false), leaving = _React$useState[0], setLeaving = _React$useState[1]; var rippleClassName = external_clsx_default()(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate); var rippleStyles = { width: rippleSize, height: rippleSize, top: -(rippleSize / 2) + rippleY, left: -(rippleSize / 2) + rippleX }; var childClassName = external_clsx_default()(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate); var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority Ripple_useEnhancedEffect(function () { if (!inProp) { // react-transition-group#onExit setLeaving(true); // react-transition-group#onExited var timeoutId = setTimeout(handleExited, timeout); return function () { clearTimeout(timeoutId); }; } return undefined; }, [handleExited, inProp, timeout]); return /*#__PURE__*/external_react_.createElement("span", { className: rippleClassName, style: rippleStyles }, /*#__PURE__*/external_react_.createElement("span", { className: childClassName })); } false ? 0 : void 0; /* harmony default export */ var ButtonBase_Ripple = (Ripple); ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js var DURATION = 550; var DELAY_RIPPLE = 80; var styles = function styles(theme) { return { /* Styles applied to the root element. */ root: { overflow: 'hidden', pointerEvents: 'none', position: 'absolute', zIndex: 0, top: 0, right: 0, bottom: 0, left: 0, borderRadius: 'inherit' }, /* Styles applied to the internal `Ripple` components `ripple` class. */ ripple: { opacity: 0, position: 'absolute' }, /* Styles applied to the internal `Ripple` components `rippleVisible` class. */ rippleVisible: { opacity: 0.3, transform: 'scale(1)', animation: "$enter ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut) }, /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */ ripplePulsate: { animationDuration: "".concat(theme.transitions.duration.shorter, "ms") }, /* Styles applied to the internal `Ripple` components `child` class. */ child: { opacity: 1, display: 'block', width: '100%', height: '100%', borderRadius: '50%', backgroundColor: 'currentColor' }, /* Styles applied to the internal `Ripple` components `childLeaving` class. */ childLeaving: { opacity: 0, animation: "$exit ".concat(DURATION, "ms ").concat(theme.transitions.easing.easeInOut) }, /* Styles applied to the internal `Ripple` components `childPulsate` class. */ childPulsate: { position: 'absolute', left: 0, top: 0, animation: "$pulsate 2500ms ".concat(theme.transitions.easing.easeInOut, " 200ms infinite") }, '@keyframes enter': { '0%': { transform: 'scale(0)', opacity: 0.1 }, '100%': { transform: 'scale(1)', opacity: 0.3 } }, '@keyframes exit': { '0%': { opacity: 1 }, '100%': { opacity: 0 } }, '@keyframes pulsate': { '0%': { transform: 'scale(1)' }, '50%': { transform: 'scale(0.92)' }, '100%': { transform: 'scale(1)' } } }; }; /** * @ignore - internal component. * * TODO v5: Make private */ var TouchRipple = /*#__PURE__*/external_react_.forwardRef(function TouchRipple(props, ref) { var _props$center = props.center, centerProp = _props$center === void 0 ? false : _props$center, classes = props.classes, className = props.className, other = (0,objectWithoutProperties/* default */.Z)(props, ["center", "classes", "className"]); var _React$useState = external_react_.useState([]), ripples = _React$useState[0], setRipples = _React$useState[1]; var nextKey = external_react_.useRef(0); var rippleCallback = external_react_.useRef(null); external_react_.useEffect(function () { if (rippleCallback.current) { rippleCallback.current(); rippleCallback.current = null; } }, [ripples]); // Used to filter out mouse emulated events on mobile. var ignoringMouseDown = external_react_.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events. // We don't want to display the ripple for touch scroll events. var startTimer = external_react_.useRef(null); // This is the hook called once the previous timeout is ready. var startTimerCommit = external_react_.useRef(null); var container = external_react_.useRef(null); external_react_.useEffect(function () { return function () { clearTimeout(startTimer.current); }; }, []); var startCommit = external_react_.useCallback(function (params) { var pulsate = params.pulsate, rippleX = params.rippleX, rippleY = params.rippleY, rippleSize = params.rippleSize, cb = params.cb; setRipples(function (oldRipples) { return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/external_react_.createElement(ButtonBase_Ripple, { key: nextKey.current, classes: classes, timeout: DURATION, pulsate: pulsate, rippleX: rippleX, rippleY: rippleY, rippleSize: rippleSize })]); }); nextKey.current += 1; rippleCallback.current = cb; }, [classes]); var start = external_react_.useCallback(function () { var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var cb = arguments.length > 2 ? arguments[2] : undefined; var _options$pulsate = options.pulsate, pulsate = _options$pulsate === void 0 ? false : _options$pulsate, _options$center = options.center, center = _options$center === void 0 ? centerProp || options.pulsate : _options$center, _options$fakeElement = options.fakeElement, fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement; if (event.type === 'mousedown' && ignoringMouseDown.current) { ignoringMouseDown.current = false; return; } if (event.type === 'touchstart') { ignoringMouseDown.current = true; } var element = fakeElement ? null : container.current; var rect = element ? element.getBoundingClientRect() : { width: 0, height: 0, left: 0, top: 0 }; // Get the size of the ripple var rippleX; var rippleY; var rippleSize; if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) { rippleX = Math.round(rect.width / 2); rippleY = Math.round(rect.height / 2); } else { var _ref = event.touches ? event.touches[0] : event, clientX = _ref.clientX, clientY = _ref.clientY; rippleX = Math.round(clientX - rect.left); rippleY = Math.round(clientY - rect.top); } if (center) { rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even. if (rippleSize % 2 === 0) { rippleSize += 1; } } else { var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2; var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2; rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2)); } // Touche devices if (event.touches) { // check that this isn't another touchstart due to multitouch // otherwise we will only clear a single timer when unmounting while two // are running if (startTimerCommit.current === null) { // Prepare the ripple effect. startTimerCommit.current = function () { startCommit({ pulsate: pulsate, rippleX: rippleX, rippleY: rippleY, rippleSize: rippleSize, cb: cb }); }; // Delay the execution of the ripple effect. startTimer.current = setTimeout(function () { if (startTimerCommit.current) { startTimerCommit.current(); startTimerCommit.current = null; } }, DELAY_RIPPLE); // We have to make a tradeoff with this value. } } else { startCommit({ pulsate: pulsate, rippleX: rippleX, rippleY: rippleY, rippleSize: rippleSize, cb: cb }); } }, [centerProp, startCommit]); var pulsate = external_react_.useCallback(function () { start({}, { pulsate: true }); }, [start]); var stop = external_react_.useCallback(function (event, cb) { clearTimeout(startTimer.current); // The touch interaction occurs too quickly. // We still want to show ripple effect. if (event.type === 'touchend' && startTimerCommit.current) { event.persist(); startTimerCommit.current(); startTimerCommit.current = null; startTimer.current = setTimeout(function () { stop(event, cb); }); return; } startTimerCommit.current = null; setRipples(function (oldRipples) { if (oldRipples.length > 0) { return oldRipples.slice(1); } return oldRipples; }); rippleCallback.current = cb; }, []); external_react_.useImperativeHandle(ref, function () { return { pulsate: pulsate, start: start, stop: stop }; }, [pulsate, start, stop]); return /*#__PURE__*/external_react_.createElement("span", (0,esm_extends/* default */.Z)({ className: external_clsx_default()(classes.root, className), ref: container }, other), /*#__PURE__*/external_react_.createElement(external_react_transition_group_.TransitionGroup, { component: null, exit: true }, ripples)); }); false ? 0 : void 0; /* harmony default export */ var ButtonBase_TouchRipple = ((0,withStyles/* default */.Z)(styles, { flip: false, name: 'MuiTouchRipple' })( /*#__PURE__*/external_react_.memo(TouchRipple))); ;// CONCATENATED MODULE: ./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js var ButtonBase_styles = { /* Styles applied to the root element. */ root: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative', WebkitTapHighlightColor: 'transparent', backgroundColor: 'transparent', // Reset default value // We disable the focus ring for mouse, touch and keyboard users. outline: 0, border: 0, margin: 0, // Remove the margin in Safari borderRadius: 0, padding: 0, // Remove the padding in Firefox cursor: 'pointer', userSelect: 'none', verticalAlign: 'middle', '-moz-appearance': 'none', // Reset '-webkit-appearance': 'none', // Reset textDecoration: 'none', // So we take precedent over the style of a native element. color: 'inherit', '&::-moz-focus-inner': { borderStyle: 'none' // Remove Firefox dotted outline. }, '&$disabled': { pointerEvents: 'none', // Disable link interactions cursor: 'default' }, '@media print': { colorAdjust: 'exact' } }, /* Pseudo-class applied to the root element if `disabled={true}`. */ disabled: {}, /* Pseudo-class applied to the root element if keyboard focused. */ focusVisible: {} }; /** * `ButtonBase` contains as few styles as possible. * It aims to be a simple building block for creating a button. * It contains a load of style reset and some focus/ripple logic. */ var ButtonBase = /*#__PURE__*/external_react_.forwardRef(function ButtonBase(props, ref) { var action = props.action, buttonRefProp = props.buttonRef, _props$centerRipple = props.centerRipple, centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple, children = props.children, classes = props.classes, className = props.className, _props$component = props.component, component = _props$component === void 0 ? 'button' : _props$component, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? false : _props$disabled, _props$disableRipple = props.disableRipple, disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple, _props$disableTouchRi = props.disableTouchRipple, disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi, _props$focusRipple = props.focusRipple, focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple, focusVisibleClassName = props.focusVisibleClassName, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onFocusVisible = props.onFocusVisible, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onTouchEnd = props.onTouchEnd, onTouchMove = props.onTouchMove, onTouchStart = props.onTouchStart, onDragLeave = props.onDragLeave, _props$tabIndex = props.tabIndex, tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex, TouchRippleProps = props.TouchRippleProps, _props$type = props.type, type = _props$type === void 0 ? 'button' : _props$type, other = (0,objectWithoutProperties/* default */.Z)(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]); var buttonRef = external_react_.useRef(null); function getButtonNode() { // #StrictMode ready return external_react_dom_.findDOMNode(buttonRef.current); } var rippleRef = external_react_.useRef(null); var _React$useState = external_react_.useState(false), focusVisible = _React$useState[0], setFocusVisible = _React$useState[1]; if (disabled && focusVisible) { setFocusVisible(false); } var _useIsFocusVisible = useIsFocusVisible(), isFocusVisible = _useIsFocusVisible.isFocusVisible, onBlurVisible = _useIsFocusVisible.onBlurVisible, focusVisibleRef = _useIsFocusVisible.ref; external_react_.useImperativeHandle(action, function () { return { focusVisible: function focusVisible() { setFocusVisible(true); buttonRef.current.focus(); } }; }, []); external_react_.useEffect(function () { if (focusVisible && focusRipple && !disableRipple) { rippleRef.current.pulsate(); } }, [disableRipple, focusRipple, focusVisible]); function useRippleHandler(rippleAction, eventCallback) { var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple; return useEventCallback(function (event) { if (eventCallback) { eventCallback(event); } var ignore = skipRippleAction; if (!ignore && rippleRef.current) { rippleRef.current[rippleAction](event); } return true; }); } var handleMouseDown = useRippleHandler('start', onMouseDown); var handleDragLeave = useRippleHandler('stop', onDragLeave); var handleMouseUp = useRippleHandler('stop', onMouseUp); var handleMouseLeave = useRippleHandler('stop', function (event) { if (focusVisible) { event.preventDefault(); } if (onMouseLeave) { onMouseLeave(event); } }); var handleTouchStart = useRippleHandler('start', onTouchStart); var handleTouchEnd = useRippleHandler('stop', onTouchEnd); var handleTouchMove = useRippleHandler('stop', onTouchMove); var handleBlur = useRippleHandler('stop', function (event) { if (focusVisible) { onBlurVisible(event); setFocusVisible(false); } if (onBlur) { onBlur(event); } }, false); var handleFocus = useEventCallback(function (event) { // Fix for https://github.com/facebook/react/issues/7769 if (!buttonRef.current) { buttonRef.current = event.currentTarget; } if (isFocusVisible(event)) { setFocusVisible(true); if (onFocusVisible) { onFocusVisible(event); } } if (onFocus) { onFocus(event); } }); var isNonNativeButton = function isNonNativeButton() { var button = getButtonNode(); return component && component !== 'button' && !(button.tagName === 'A' && button.href); }; /** * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat */ var keydownRef = external_react_.useRef(false); var handleKeyDown = useEventCallback(function (event) { // Check if key is already down to avoid repeats being counted as multiple activations if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') { keydownRef.current = true; event.persist(); rippleRef.current.stop(event, function () { rippleRef.current.start(event); }); } if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') { event.preventDefault(); } if (onKeyDown) { onKeyDown(event); } // Keyboard accessibility for non interactive elements if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) { event.preventDefault(); if (onClick) { onClick(event); } } }); var handleKeyUp = useEventCallback(function (event) { // calling preventDefault in keyUp on a