import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { forwardRef, useRef, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Button from '../button/index.js';
import { PortalNode } from '../portal/index.js';
import { a as DialogOverlay, D as DialogContent } from '../dialog.esm-C1hoFD2p.js';
import { u as useId } from '../auto-id.esm-Cly76abB.js';
import { b as useForkedRef, m as makeId, g as getOwnerDocument, c as createNamedContext } from '../utils.esm-CKyxlHOy.js';
import { motion, AnimatePresence } from 'framer-motion';
import { ActionContext, ActionProvider } from './action.js';
import '../defineProperty-CEd-kZQW.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 '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import 'react-dom';
import '../button/button-group.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../portal.esm-CuKGPwhL.js';
import '../setPrototypeOf-Bchah3-D.js';
import '../warning-s9zGJbnw.js';

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/**
 * Use invariant() to assert state which your program assumes to be true.
 *
 * Provide sprintf-style format (only %s is supported) and arguments
 * to provide information about what broke and what you were
 * expecting.
 *
 * The invariant message will be stripped in production, but the invariant
 * will remain to ensure logic does not differ in production.
 */


var NODE_ENV = process.env.NODE_ENV;

var invariant = function invariant(condition, format, a, b, c, d, e, f) {
  if (NODE_ENV !== 'production') {
    if (format === undefined) {
      throw new Error('invariant requires an error message argument');
    }
  }

  if (!condition) {
    var error;

    if (format === undefined) {
      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error(format.replace(/%s/g, function () {
        return args[argIndex++];
      }));
      error.name = 'Invariant Violation';
    }

    error.framesToPop = 1; // we don't care about invariant's own frame

    throw error;
  }
};

var invariant_1 = invariant;

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var AlertDialogContext = /*#__PURE__*/createNamedContext("AlertDialogContext", {}); ////////////////////////////////////////////////////////////////////////////////

/**
 * AlertDialogOverlay
 *
 * Low-level component if you need more control over the styles or rendering of
 * the dialog overlay. In the following example we use the AlertDialogOverlay
 * and AlertDialogContent to have more control over the styles.
 *
 * Note: You must render an `AlertDialogContent` inside.
 *
 * @see Docs https://reach.tech/alert-dialog#alertdialogoverlay
 */

var AlertDialogOverlay = /*#__PURE__*/forwardRef(function AlertDialogOverlay(_ref, forwardedRef) {
  var leastDestructiveRef = _ref.leastDestructiveRef,
      props = _objectWithoutPropertiesLoose(_ref, ["leastDestructiveRef"]);

  var ownRef = useRef(null);
  var ref = useForkedRef(forwardedRef, ownRef);
  var id = useId(props.id);
  var labelId = id ? makeId("alert-dialog", id) : undefined;
  var descriptionId = id ? makeId("alert-dialog-description", id) : undefined;
  return /*#__PURE__*/React__default.createElement(AlertDialogContext.Provider, {
    value: {
      labelId: labelId,
      descriptionId: descriptionId,
      overlayRef: ownRef,
      leastDestructiveRef: leastDestructiveRef
    }
  }, /*#__PURE__*/React__default.createElement(DialogOverlay, Object.assign({}, props, {
    ref: ref,
    "data-reach-alert-dialog-overlay": true,
    initialFocusRef: leastDestructiveRef
  })));
});

if (process.env.NODE_ENV !== "production") {
  AlertDialogOverlay.displayName = "AlertDialogOverlay";
  AlertDialogOverlay.propTypes = {
    isOpen: PropTypes.bool,
    onDismiss: PropTypes.func,
    leastDestructiveRef: function leastDestructiveRef() {
      return null;
    },
    children: PropTypes.node
  };
} ////////////////////////////////////////////////////////////////////////////////

/**
 * AlertDialogContent
 *
 * Low-level component if you need more control over the styles or rendering of
 * the dialog content.
 *
 * Note: Must be a child of `AlertDialogOverlay`.
 *
 * Note: You only need to use this when you are also styling
 * `AlertDialogOverlay`, otherwise you can use the high-level `AlertDialog`
 * component and pass the props to it.
 *
 * @see Docs https://reach.tech/alert-dialog#alertdialogcontent
 */


var AlertDialogContent = /*#__PURE__*/forwardRef(function AlertDialogContent(_ref2, forwardRef) {
  var children = _ref2.children,
      props = _objectWithoutPropertiesLoose(_ref2, ["children"]);

  var _useContext = useContext(AlertDialogContext),
      descriptionId = _useContext.descriptionId,
      labelId = _useContext.labelId,
      leastDestructiveRef = _useContext.leastDestructiveRef,
      overlayRef = _useContext.overlayRef;

  useEffect(function () {
    var ownerDocument = getOwnerDocument(overlayRef.current) || document;

    if (labelId) {
      !ownerDocument.getElementById(labelId) ? process.env.NODE_ENV !== "production" ? invariant_1(false, "@reach/alert-dialog: You must render a `<AlertDialogLabel>`\n          inside an `<AlertDialog/>`.") : invariant_1(false) : void 0;
    }

    !leastDestructiveRef ? process.env.NODE_ENV !== "production" ? invariant_1(false, "@reach/alert-dialog: You must provide a `leastDestructiveRef` to\n          `<AlertDialog>` or `<AlertDialogOverlay/>`. Please see\n          https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref") : invariant_1(false) : void 0; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [labelId, leastDestructiveRef]);
  return /*#__PURE__*/React__default.createElement(DialogContent // The element that contains all elements of the dialog, including the
  // alert message and any dialog buttons, has role alertdialog.
  // https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog
  , Object.assign({
    // The element that contains all elements of the dialog, including the
    // alert message and any dialog buttons, has role alertdialog.
    // https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog
    role: "alertdialog",
    "aria-describedby": descriptionId,
    "aria-labelledby": props["aria-label"] ? undefined : labelId
  }, props, {
    ref: forwardRef,
    "data-reach-alert-dialong-content": true,
    "data-reach-alert-dialog-content": true
  }), children);
});

if (process.env.NODE_ENV !== "production") {
  AlertDialogContent.displayName = "AlertDialogContent";
  AlertDialogContent.propTypes = {
    children: PropTypes.node
  };
} ////////////////////////////////////////////////////////////////////////////////

/**
 * AlertDialogLabel
 *
 * The first thing ready by screen readers when the dialog opens, usually the
 * title of the dialog like "Warning!" or "Please confirm!".
 *
 * This is required. The `AlertDialog` will throw an error if no label is
 * rendered.
 *
 * @see Docs https://reach.tech/alert-dialog#alertdialoglabel
 */


var AlertDialogLabel = function AlertDialogLabel(props) {
  var _useContext2 = useContext(AlertDialogContext),
      labelId = _useContext2.labelId;

  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
    id: labelId,
    "data-reach-alert-dialog-label": true
  }));
};

if (process.env.NODE_ENV !== "production") {
  AlertDialogLabel.displayName = "AlertDialogLabel";
} ////////////////////////////////////////////////////////////////////////////////

/**
 * AlertDialogDescription
 *
 * Additional content read by screen readers, usually a longer description
 * about what you need from the user like "This action is permanent, are you
 * sure?" etc.
 *
 * @see Docs https://reach.tech/alert-dialog#alertdialogdescription
 * @param props
 */


var AlertDialogDescription = function AlertDialogDescription(props) {
  var _useContext3 = useContext(AlertDialogContext),
      descriptionId = _useContext3.descriptionId;

  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
    id: descriptionId,
    "data-reach-alert-dialog-description": true
  }));
};

if (process.env.NODE_ENV !== "production") {
  AlertDialogDescription.displayName = "AlertDialogDescription";
} ////////////////////////////////////////////////////////////////////////////////

if (process.env.NODE_ENV !== "production") {
  ({
    isOpen: PropTypes.bool,
    onDismiss: PropTypes.func,
    leastDestructiveRef: function leastDestructiveRef() {
      return null;
    },
    children: PropTypes.node
  });
}

var _excluded = ["id", "destructive"],
    _excluded2 = ["children", "className", "label", "onClose", "dismissable", "picture"];
var AnimatedDialogContent = motion.custom(AlertDialogContent);
var DEFAULT = "p-6 bg-white rounded-lg shadow font-sans ";
var Actions = function Actions(_ref) {
  var leastDestructiveRef = _ref.leastDestructiveRef;

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

  if (actions.length === 0) return null;
  return /*#__PURE__*/React__default.createElement("div", {
    className: "mt-6 flex w-full gap-4",
    "data-testid": "actions"
  }, actions.map(function (_ref2) {
    var id = _ref2.id,
        destructive = _ref2.destructive,
        props = _objectWithoutProperties(_ref2, _excluded);

    return /*#__PURE__*/React__default.createElement(Button, _extends({
      key: id,
      ref: destructive ? undefined : leastDestructiveRef,
      size: "lg"
    }, props, {
      className: cx("flex-grow", props.className)
    }));
  }));
};

function ConfirmModal(_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      label = _ref3.label,
      onClose = _ref3.onClose,
      _ref3$dismissable = _ref3.dismissable,
      dismissable = _ref3$dismissable === void 0 ? true : _ref3$dismissable,
      picture = _ref3.picture,
      props = _objectWithoutProperties(_ref3, _excluded2);

  var close = useRef();
  return /*#__PURE__*/React__default.createElement(AlertDialogOverlay, _extends({
    className: "flex items-center justify-center",
    onDismiss: dismissable && onClose,
    leastDestructiveRef: close
  }, props), /*#__PURE__*/React__default.createElement(ActionProvider, null, /*#__PURE__*/React__default.createElement(AnimatePresence, null, /*#__PURE__*/React__default.createElement(AnimatedDialogContent, {
    key: "confirm-modal-content",
    className: cx(className, DEFAULT),
    initial: {
      opacity: 0,
      y: -15
    },
    animate: {
      opacity: 1,
      y: 0
    },
    exit: {
      opacity: 0
    }
  }, picture && /*#__PURE__*/React__default.createElement("div", {
    className: "mb-4"
  }, picture), /*#__PURE__*/React__default.createElement(AlertDialogLabel, {
    style: {
      maxWidth: "22rem"
    },
    className: "text-lg text-gray-900 font-semibold leading-8"
  }, label), /*#__PURE__*/React__default.createElement(AlertDialogDescription, {
    style: {
      maxWidth: "22rem"
    },
    className: cx("text-gray-800 leading-7", label ? "text-base mt-2" : "text-lg font-semibold")
  }, /*#__PURE__*/React__default.createElement(PortalNode, null, children)), /*#__PURE__*/React__default.createElement(Actions, {
    leastDestructiveRef: close
  })))));
}

ConfirmModal.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
  className: PropTypes.string,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  onClose: PropTypes.func.isRequired,
  dismissable: PropTypes.bool,
  picture: PropTypes.object
};

export { Actions, ConfirmModal as default };
