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