import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import { P as Portal } from '../key_codes-ff72266d.js';
import useActivify from '../hooks/useActivify.js';
import { u as useEscapeKey } from '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, C as CloseIcon, g as CloseV2Icon } from '../index-fc484d02.js';
import './withTooltip.js';
import '../index-155df85b.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import '../generic-7099c3ed.js';
import Button from '../ui/button.js';
import { u as useEnterKey } from '../useEnterKey-cb5bf7c9.js';
import { T as ThemedModalWrapper, a as ThemedModalOverlay, b as ThemedModal, H as HeaderWrapper, B as BodyWrapper, F as FooterWrapper, c as ThemedIconWrapper } from '../ThemedModal-adf27152.js';

var css_248z = ".Modal_modalWrapper__2rSfe {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100%;\n  z-index: 1000000009;\n  overflow: hidden;\n  pointer-events: none; }\n  .Modal_modalWrapper__2rSfe * {\n    -webkit-font-smoothing: antialiased; }\n\n.Modal_modalOverlay__4b2C_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  opacity: 0;\n  transition: 0.2s linear;\n  pointer-events: auto; }\n  .Modal_modalOverlay__4b2C_.Modal_modalActive__mE3dG {\n    opacity: 0.4 !important; }\n\n.Modal_modal__3EFuR {\n  opacity: 0;\n  position: absolute;\n  z-index: 2;\n  background-color: #fff;\n  outline: none;\n  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);\n  transform: translate3d(-50%, -45%, 0);\n  top: 50%;\n  left: 50%;\n  min-width: 40vw;\n  border-radius: 5px;\n  pointer-events: auto; }\n  .Modal_modal__3EFuR * {\n    font-family: 'Roboto', sans-serif; }\n  .Modal_modal__3EFuR.Modal_modalActive__mE3dG {\n    opacity: 1 !important;\n    transform: translate3d(-50%, -50%, 0) !important; }\n";
var styles = {"modalWrapper":"Modal_modalWrapper__2rSfe","modalOverlay":"Modal_modalOverlay__4b2C_","modalActive":"Modal_modalActive__mE3dG","modal":"Modal_modal__3EFuR"};
styleInject(css_248z);

var css_248z$1 = ".ModalHeader_modalHeader__1BLa_ {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  border-bottom: 1px solid #eee;\n  font-size: 18px;\n  font-weight: 500; }\n\n.ModalHeader_leftColumn__3oyBn,\n.ModalHeader_rightColumn__yiK_S {\n  display: flex;\n  align-items: center; }\n\n.ModalHeader_icon__2dEhr {\n  margin-right: 8px;\n  cursor: pointer;\n  opacity: 0.7; }\n  .ModalHeader_icon__2dEhr:hover {\n    opacity: 1; }\n";
var styles$1 = {"modalHeader":"ModalHeader_modalHeader__1BLa_","leftColumn":"ModalHeader_leftColumn__3oyBn","rightColumn":"ModalHeader_rightColumn__yiK_S","icon":"ModalHeader_icon__2dEhr"};
styleInject(css_248z$1);

var ModalHeader = function ModalHeader(_ref) {
  var children = _ref.children,
    customCloseIcon = _ref.customCloseIcon,
    onClose = _ref.onClose,
    onSave = _ref.onSave,
    className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    withSave = _ref.withSave,
    saveTitle = _ref.saveTitle;
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.modalHeader, " ").concat(prefixClassName, " ").concat(className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.leftColumn, " ").concat(prefixClassName, "-column-left")
  }, /*#__PURE__*/React.createElement("div", {
    "data-testid": "modal-close-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    onClick: onClose,
    prefixClassName: "".concat(prefixClassName, "-icon"),
    className: styles$1.icon,
    src: customCloseIcon || CloseIcon
  })), children), withSave ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.rightColumn, " ").concat(prefixClassName, "-column-right")
  }, /*#__PURE__*/React.createElement(Button, {
    type: Button.TYPES.PRIMARY,
    onClick: onSave,
    className: "".concat(prefixClassName, "-cta")
  }, saveTitle || "Save")) : null);
};
ModalHeader.propTypes = {
  /** The title of the header */
  children: PropTypes.string,
  /** The className added to the outermost element */
  className: PropTypes.string,
  /** The callback for closing the modal */
  onClose: PropTypes.func,
  /** The callback called when clicking on the primary CTA */
  onSave: PropTypes.func,
  /** prefix added to all the div layers */
  prefixClassName: PropTypes.string,
  /** The save button text (The text shown on the primary cta) */
  saveTitle: PropTypes.string,
  /** Whether to disable the save button */
  withSave: PropTypes.bool,
  /** Custom close icon for modal header, can either be a string identifier
   * for the icon (angle-down) or a react node  */
  customCloseIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
};
ModalHeader.defaultProps = {
  children: "",
  className: "",
  customCloseIcon: "",
  onClose: function onClose() {},
  onSave: function onSave() {},
  prefixClassName: "",
  saveTitle: "",
  withSave: false
};
ModalHeader.classNames = {
  $prefix: "the outermost element",
  "$prefix-column-left": "The left column of the header",
  "$prefix-icon": "The cross button",
  "$prefix-column-right": "The right column of the header",
  "$prefix-cta": "The CTA on the right"
};
ModalHeader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ModalHeader",
  "props": {
    "children": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The title of the header"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The className added to the outermost element"
    },
    "customCloseIcon": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "union",
        "value": [{
          "name": "object"
        }, {
          "name": "string"
        }]
      },
      "required": false,
      "description": "Custom close icon for modal header, can either be a string identifier\nfor the icon (angle-down) or a react node"
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The callback for closing the modal"
    },
    "onSave": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "The callback called when clicking on the primary CTA"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix added to all the div layers"
    },
    "saveTitle": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The save button text (The text shown on the primary cta)"
    },
    "withSave": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether to disable the save button"
    }
  }
};

var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var themed = props.themed,
    onClose = props.onClose,
    onEnter = props.onEnter,
    className = props.className,
    children = props.children,
    noOverlay = props.noOverlay,
    active = props.active,
    prefixClassName = props.prefixClassName,
    header = props.header,
    footer = props.footer,
    style = props.style;
  var _useActivify = useActivify(active),
    enabled = _useActivify.enabled,
    visible = _useActivify.visible;
  var activeClassName = visible ? styles.modalActive : "";
  useEscapeKey(onClose);
  useEnterKey(onEnter);
  if (!enabled) return null;
  if (themed) {
    return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ThemedModalWrapper, {
      "data-testid": "modal"
    }, !noOverlay && /*#__PURE__*/React.createElement(ThemedModalOverlay, {
      active: visible,
      onClick: onClose
    }), /*#__PURE__*/React.createElement(ThemedModal, {
      active: visible,
      ref: ref
    }, header && /*#__PURE__*/React.createElement(HeaderWrapper, {
      "data-testid": "modal-header"
    }, header), /*#__PURE__*/React.createElement(BodyWrapper, {
      "data-testid": "modal-body",
      isHeader: header,
      isFooter: footer,
      style: style
    }, children), footer && /*#__PURE__*/React.createElement(FooterWrapper, {
      "data-testid": "modal-footer"
    }, footer), /*#__PURE__*/React.createElement(ThemedIconWrapper, {
      "data-testid": "modal-close-icon"
    }, /*#__PURE__*/React.createElement(Icon, {
      src: CloseV2Icon,
      onClick: onClose
    })))));
  }
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
    "data-testid": "modal",
    className: "".concat(styles.modalWrapper, " ").concat(prefixClassName, " ").concat(className)
  }, noOverlay ? null : /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.modalOverlay, " ").concat(activeClassName, " ").concat(prefixClassName, "-overlay"),
    onClick: onClose
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.modal, " ").concat(activeClassName, " ").concat(prefixClassName, "-body")
  }, children)));
});
Modal.Header = ModalHeader;
Modal.propTypes = {
  /** Whether you want to render the new modal */
  themed: PropTypes.bool,
  /** The content you want to render inside the modal */
  children: PropTypes.node,
  /** When the modal closes, this is the callback function called */
  onClose: PropTypes.func,
  /** When the enter button is pressed, this function is called */
  onEnter: PropTypes.func,
  /** Whether the modal is visible or not */
  active: PropTypes.bool,
  /** The className applied to the outermost div of the element */
  className: PropTypes.string,
  /** The prefixClassName appended to all the layers */
  prefixClassName: PropTypes.string,
  /** If true, doesnt render the overlay (transparent) */
  noOverlay: PropTypes.bool,
  /** Header for Themed Modal */
  header: PropTypes.node,
  /** Footer for Themed Modal */
  footer: PropTypes.node,
  /** Style Prop */
  style: PropTypes.object,
  /** Ref to be assigned to Modal */
  ref: PropTypes.any
};
Modal.defaultProps = {
  themed: false,
  onClose: function onClose() {},
  onEnter: function onEnter() {},
  active: false,
  className: "",
  prefixClassName: "",
  noOverlay: false,
  style: {},
  ref: null
};
Modal.classNames = {
  $prefix: "The main wrapper inside the portal",
  "$prefix-overlay": "The overlay covering the page",
  "$prefix-body": "The actual modal itself"
};
Modal.__docgenInfo = {
  "description": "",
  "methods": [],
  "props": {
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether you want to render the new modal"
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When the modal closes, this is the callback function called"
    },
    "onEnter": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "When the enter button is pressed, this function is called"
    },
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the modal is visible or not"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The className applied to the outermost div of the element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefixClassName appended to all the layers"
    },
    "noOverlay": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If true, doesnt render the overlay (transparent)"
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Style Prop"
    },
    "ref": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "any"
      },
      "required": false,
      "description": "Ref to be assigned to Modal"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "The content you want to render inside the modal"
    },
    "header": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Header for Themed Modal"
    },
    "footer": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Footer for Themed Modal"
    }
  }
};

export default Modal;
