import { a as __rest, _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import Container from './Container.js';
import IconButton from './IconButton.js';
import { m as makeStyles } from '../makeStyles-c9a99c7a.js';
import { a as createStyles } from '../createStyles-16423e9e.js';
import { M as MuiModal } from '../Modal-5d521807.js';
import { d as _objectWithoutProperties, b as _extends, P as PropTypes } from '../defaultTheme-49a26576.js';
import * as React from 'react';
import { c as clsx } from '../clsx.m-6243b874.js';
import { a as withStyles } from '../withStyles-99aeb25b.js';
import { F as Fade } from '../Fade-e167cb2c.js';
import { u as useTheme } from '../useTheme-27496d89.js';
import { u as useMediaQuery } from '../useMediaQuery-d0d673c2.js';
import { B as Box } from '../Box-581dc061.js';
import '../styled-339d0187.js';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import './Icon.js';
import '../icons/ArrowRight.js';
import '../icons/ArrowRightCircle.js';
import '../icons/Check.js';
import '../icons/CheckCircle.js';
import '../icons/ChevronRight.js';
import '../icons/CrossCircle.js';
import '../icons/DollarSign.js';
import '../icons/InfoCircle.js';
import '../icons/Link.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/TriangleLeft.js';
import '../icons/Copy.js';
import '../icons/SortUp.js';
import '../icons/Cross.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../theme/colors.js';
import '../IconButton-7563dc0d.js';
import '../capitalize-5d3e9aac.js';
import '../ButtonBase-11d3cdb5.js';
import 'react-dom';
import '../useForkRef-4ff8cc89.js';
import '../useEventCallback-8817ed1c.js';
import '../deprecatedPropType-0232df1e.js';
import '../useIsFocusVisible-c048447c.js';
import '../TransitionGroupContext-2ba64e99.js';
import '../refType-5cc24a92.js';
import '../elementTypeAcceptingRef-7677eeee.js';
import '../ownerDocument-e276d08d.js';
import '../Portal-ea11d671.js';
import '../HTMLElementType-a5d51d34.js';
import '../elementAcceptingRef-29f38505.js';
import '../utils-2b600105.js';

var styles = {
  /* Styles applied to the root element. */
  root: {
    // Improve scrollable dialog support.
    zIndex: -1,
    position: 'fixed',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    WebkitTapHighlightColor: 'transparent'
  },

  /* Styles applied to the root element if `invisible={true}`. */
  invisible: {
    backgroundColor: 'transparent'
  }
};
var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
  var children = props.children,
      classes = props.classes,
      className = props.className,
      _props$invisible = props.invisible,
      invisible = _props$invisible === void 0 ? false : _props$invisible,
      open = props.open,
      transitionDuration = props.transitionDuration,
      _props$TransitionComp = props.TransitionComponent,
      TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
      other = _objectWithoutProperties(props, ["children", "classes", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);

  return /*#__PURE__*/React.createElement(TransitionComponent, _extends({
    in: open,
    timeout: transitionDuration
  }, other), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, className, invisible && classes.invisible),
    "aria-hidden": true,
    ref: ref
  }, children));
});
process.env.NODE_ENV !== "production" ? Backdrop.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // |     To update them edit the d.ts file and run "yarn proptypes"     |
  // ----------------------------------------------------------------------

  /**
   * The content of the component.
   */
  children: PropTypes.node,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * If `true`, the backdrop is invisible.
   * It can be used when rendering a popover or a custom select component.
   */
  invisible: PropTypes.bool,

  /**
   * If `true`, the backdrop is open.
   */
  open: PropTypes.bool.isRequired,

  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   */
  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
    appear: PropTypes.number,
    enter: PropTypes.number,
    exit: PropTypes.number
  })])
} : void 0;
var Backdrop$1 = withStyles(styles, {
  name: 'MuiBackdrop'
})(Backdrop);

var sizeMap = {
    sm: 590,
    md: 700,
    safeArea: "100%",
    fullScreen: "100%"
};
var SizeLevel;
(function (SizeLevel) {
    SizeLevel[SizeLevel["Regular"] = 0] = "Regular";
    SizeLevel[SizeLevel["Large"] = 1] = "Large";
})(SizeLevel || (SizeLevel = {}));
var sizeLevelMap = {
    sm: SizeLevel.Regular,
    md: SizeLevel.Regular,
    safeArea: SizeLevel.Large,
    fullScreen: SizeLevel.Large
};
var defaultSize = "md";
var useStyles = makeStyles(function (theme) {
    return createStyles({
        modal: {
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        },
        paper: function (_a) {
            var _b;
            var size = _a.size;
            return (_b = {
                    position: "relative",
                    width: sizeMap[size],
                    backgroundColor: theme.palette.gray.white,
                    boxShadow: "0 24px 32px 0 rgba(0, 0, 0, 0.08)",
                    borderRadius: theme.spacing(3),
                    padding: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 8 : 4)
                },
                _b[theme.breakpoints.down("sm")] = {
                    padding: theme.spacing(4)
                },
                _b);
        },
        closeButton: function (_a) {
            var _b;
            var size = _a.size;
            return (_b = {
                    position: "absolute",
                    top: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1),
                    right: theme.spacing(sizeLevelMap[size] === SizeLevel.Large ? 2.5 : 1)
                },
                _b[theme.breakpoints.down("sm")] = {
                    top: theme.spacing(1),
                    right: theme.spacing(1)
                },
                _b);
        }
    });
});
var BoxWrapper = function (_a) {
    var _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.closeButton, closeButton = _c === void 0 ? false : _c, onClose = _a.onClose, children = _a.children;
    var theme = useTheme();
    var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    var classes = useStyles({ size: size });
    var ModalContent = function () { return (jsxs(Box, __assign({ className: classes.paper }, { children: [closeButton && (jsx(Box, __assign({ className: classes.closeButton }, { children: jsx(IconButton, { iconProps: {
                        iconKey: typeof closeButton !== "string" ? "crossCircle" : closeButton,
                        size: sizeLevelMap[size] === SizeLevel.Large && !isMobile ? "md" : "sm",
                        color: "secondary"
                    }, onClick: function (event) {
                        if (onClose)
                            onClose(event, "escapeKeyDown");
                    } }, void 0) }), void 0)), jsx(Box, { children: children }, void 0)] }), void 0)); };
    if (size !== "safeArea")
        return jsx(ModalContent, {}, void 0);
    return (jsx(Container, { children: jsx(ModalContent, {}, void 0) }, void 0));
};
var Modal = function (_a) {
    var open = _a.open, onClose = _a.onClose, titleId = _a.titleId, descriptionId = _a.descriptionId, _b = _a.size, size = _b === void 0 ? defaultSize : _b, props = __rest(_a, ["open", "onClose", "titleId", "descriptionId", "size"]);
    var classes = useStyles({ size: size });
    var handleClose = function (event, reason) {
        if (onClose)
            onClose(event, reason);
    };
    return (jsx(MuiModal, __assign({ "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : undefined, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : undefined, className: classes.modal, open: open, onClose: handleClose, closeAfterTransition: true, BackdropComponent: Backdrop$1, BackdropProps: { timeout: 500 } }, { children: jsx(Fade, __assign({ in: open }, { children: jsx("div", { children: jsx(BoxWrapper, __assign({ size: size }, props), void 0) }, void 0) }), void 0) }), void 0));
};

export { Modal as default };
