import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { useContext } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { D as DialogContent, a as DialogOverlay } from '../dialog.esm-C1hoFD2p.js';
import LoadingAnimation from '../loading-animation/index.js';
import { IconButton } from '../button/index.js';
import { PortalNode } from '../portal/index.js';
import { motion, AnimatePresence } from 'framer-motion';
export { default as ConfirmModal } from './confirm-modal.js';
export { default as confirm } from './confirm.js';
import { ActionProvider, Actions, ActionContext } from './action.js';
export { default as Action } from './action.js';
import TitleBar from './title-bar.js';
import '../typeof-CgC7Bq6K.js';
import '../portal.esm-CuKGPwhL.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import 'react-dom';
import '../setPrototypeOf-Bchah3-D.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../slicedToArray-BB-AwwkK.js';
import '../floating-ui.react-cWPyyUrN.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import '../button/button-group.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../auto-id.esm-Cly76abB.js';

var _excluded = ["children", "label", "ariaLabel", "onClose", "className", "size", "loading", "width", "hideCloseButton", "hideHeader", "separator"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var AnimatedDialogContent = motion.custom(DialogContent);
var DEFAULT = "p-0 my-auto bg-white font-sans rounded-lg shadow max-h-screen";
var HEADER_DEFAULT = "flex items-center justify-between px-6";
var SIZE_CLASSES = {
  md: "max-w-2xl w-4/5",
  lg: "max-w-4xl w-4/5",
  full: "max-w-full w-4/5",
  fullscreen: "w-screen h-screen"
};
var SIZE_STYLES = {
  md: {},
  lg: {},
  full: {
    maxWidth: "1600px",
    width: "calc(100vw - 4rem)",
    margin: "4rem auto 4rem auto"
  },
  fullscreen: {
    margin: 0
  }
};

function Header(_ref) {
  var children = _ref.children,
      className = _ref.className,
      separator = _ref.separator;

  var _useContext = useContext(ActionContext),
      actions = _useContext.actions;

  var classes = cx(HEADER_DEFAULT, className, {
    "border-b border-gray-200 py-5": actions.length > 0 || separator,
    "pt-6 pb-2": actions.length === 0 && !separator
  });
  return /*#__PURE__*/React__default.createElement("div", {
    className: classes
  }, children);
}

function Modal(_ref2) {
  var children = _ref2.children,
      label = _ref2.label,
      ariaLabel = _ref2.ariaLabel,
      onClose = _ref2.onClose,
      className = _ref2.className,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? "md" : _ref2$size,
      _ref2$loading = _ref2.loading,
      loading = _ref2$loading === void 0 ? false : _ref2$loading,
      width = _ref2.width,
      _ref2$hideCloseButton = _ref2.hideCloseButton,
      hideCloseButton = _ref2$hideCloseButton === void 0 ? false : _ref2$hideCloseButton,
      _ref2$hideHeader = _ref2.hideHeader,
      hideHeader = _ref2$hideHeader === void 0 ? false : _ref2$hideHeader,
      separator = _ref2.separator,
      props = _objectWithoutProperties(_ref2, _excluded);

  return /*#__PURE__*/React__default.createElement(ActionProvider, null, /*#__PURE__*/React__default.createElement(DialogOverlay, _extends({
    onDismiss: onClose,
    className: ["full", "fullscreen"].includes(size) ? "" : "flex justify-center items-center pt-8"
  }, props), /*#__PURE__*/React__default.createElement(AnimatePresence, null, /*#__PURE__*/React__default.createElement(AnimatedDialogContent, {
    key: "modal-content",
    "aria-label": ariaLabel || label,
    className: cx(className, DEFAULT, SIZE_CLASSES[size]),
    style: _objectSpread(_objectSpread({}, SIZE_STYLES[size]), {}, {
      maxWidth: width
    }),
    initial: {
      opacity: 0,
      y: size === "full" ? 15 : -15
    },
    animate: {
      opacity: 1,
      y: 0
    },
    exit: {
      opacity: 0
    }
  }, !hideHeader && /*#__PURE__*/React__default.createElement(Header, {
    className: "gap-8",
    separator: separator
  }, label ? /*#__PURE__*/React__default.createElement(TitleBar, {
    content: label
  }) : /*#__PURE__*/React__default.createElement("div", null), !hideCloseButton && /*#__PURE__*/React__default.createElement(IconButton, {
    icon: "close",
    is: "tertiary",
    className: "focus:outline-none hover:bg-gray-50",
    label: "Close",
    onClick: onClose
  })), loading ? /*#__PURE__*/React__default.createElement("div", {
    className: "flex justify-center"
  }, /*#__PURE__*/React__default.createElement(LoadingAnimation, null)) : /*#__PURE__*/React__default.createElement("div", {
    className: "bg-white rounded-b-lg"
  }, /*#__PURE__*/React__default.createElement(PortalNode, {
    className: "p-6 bg-white rounded-b-lg"
  }, children), /*#__PURE__*/React__default.createElement(Actions, null))))));
}

Modal.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

  /** Typically a string, but you can use JSX for more customizability. */
  label: PropTypes.node,

  /** A label that describes the modal on screen readers. Add this if you don't provide a label, or if you provide a JSX label. */
  ariaLabel: PropTypes.string,
  onClose: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** You don't need to provide this if you set a `width`. */
  size: PropTypes.oneOf(["md", "lg", "full", "fullscreen", "custom"]),
  hideCloseButton: PropTypes.bool,

  /** Hides the header */
  hideHeader: PropTypes.bool,

  /** forces the separator under the title even when there are no Actions */
  separator: PropTypes.bool
};

export { Modal as default };
