"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunkDCH43ZYZcjs = require('./chunk-DCH43ZYZ.cjs');


var _chunkXKV4MIWIcjs = require('./chunk-XKV4MIWI.cjs');


var _chunkXO5V3EX5cjs = require('./chunk-XO5V3EX5.cjs');


var _chunkKL5ZQSVOcjs = require('./chunk-KL5ZQSVO.cjs');


var _chunkOTDIKLJRcjs = require('./chunk-OTDIKLJR.cjs');


var _chunkYPB3YRAGcjs = require('./chunk-YPB3YRAG.cjs');


var _chunkDDGSFIWAcjs = require('./chunk-DDGSFIWA.cjs');


var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');


var _chunkMFKERIW4cjs = require('./chunk-MFKERIW4.cjs');



var _chunkKKOBB4X5cjs = require('./chunk-KKOBB4X5.cjs');


var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');


var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');


var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');





var _chunkRSHN4K6Ncjs = require('./chunk-RSHN4K6N.cjs');


var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');



var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');



var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');

// src/components/Modal.tsx
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);






var _react = require('react'); var _react2 = _interopRequireDefault(_react);
var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
var _jsxruntime = require('@emotion/react/jsx-runtime');
function isSubmitLinkWithHref(submitLink) {
  return Boolean(submitLink && "href" in submitLink);
}
function Modal({
  visible,
  topContent,
  title,
  description,
  children,
  onClose,
  onCancel,
  cancelDisabled,
  cancelHidden,
  ghost,
  onSubmit,
  submitDisabled,
  submitLoading,
  submitLoadingKind,
  submitText,
  submitIcon,
  submitLink,
  cancelText = "Cancel",
  firstFocusRef,
  smKind = "default",
  top,
  nonDismissable = false,
  autoFocus = true,
  width = 460,
  progressBar,
  buttonOrder,
  buttonLayout = "horizontal",
  extraActions,
  handleBack,
  appendToElement,
  bottomContent,
  topLeftIcon,
  drawerKind,
  drawerPadding,
  drawerCloseButton = true,
  drawerAlignBottom,
  drawerDisableTouchMove,
  voidOverlayBackground
}) {
  const visibleChangedRef = _react.useRef.call(void 0, false);
  const [visibleChanged, setVisibleChanged] = _react.useState.call(void 0, false);
  const nodeRef = _react.useRef.call(void 0, null);
  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = _chunkKL5ZQSVOcjs.useLiveRef.call(void 0, );
  const ref = firstFocusRef || defaultFirstFocusRef;
  const [nodeReady, setNodeReady] = _react2.default.useState(false);
  const overlayRef = _react.useRef.call(void 0, null);
  const prevFocusedElement = _react.useRef.call(void 0, );
  const modalContainerRef = _react.useRef.call(void 0, null);
  const bp2 = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
  const isSm = bp2.current("sm" /* sm */);
  _react.useEffect.call(void 0, () => {
    if (visible !== visibleChangedRef.current) {
      visibleChangedRef.current = visible;
      setVisibleChanged(true);
    }
  }, [visible]);
  _react.useEffect.call(void 0, () => {
    if (visibleChanged) {
      setVisibleChanged(false);
    }
  }, [visibleChanged]);
  _react.useEffect.call(void 0, () => {
    prevFocusedElement.current = document.activeElement;
    const elementToAppendTo = appendToElement != null ? appendToElement : document.body;
    if (!nodeRef.current) {
      nodeRef.current = document.createElement("div");
      elementToAppendTo.appendChild(nodeRef.current);
    }
    setNodeReady(true);
    return () => {
      if (nodeRef.current) {
        elementToAppendTo.removeChild(nodeRef.current);
        nodeRef.current = null;
      }
    };
  }, [appendToElement]);
  _react.useEffect.call(void 0, () => {
    const handleOutsideClick = (event) => {
      if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
        onClose();
      }
    };
    const handleKeyDown = (event) => {
      if (visible && event.key === "Escape" && !nonDismissable) {
        onClose();
      }
    };
    if (visible) {
      if (modalContainerRef.current) {
        modalContainerRef.current.addEventListener("keydown", handleKeyDown);
      }
      if (overlayRef.current) {
        overlayRef.current.addEventListener("click", handleOutsideClick);
      }
    } else {
      if (modalContainerRef.current) {
        modalContainerRef.current.removeEventListener("keydown", handleKeyDown);
      }
      if (overlayRef.current) {
        overlayRef.current.removeEventListener("click", handleOutsideClick);
      }
    }
    const containerRef = modalContainerRef.current;
    const overlayRefVar = overlayRef.current;
    return () => {
      if (containerRef) {
        containerRef.removeEventListener("keydown", handleKeyDown);
      }
      if (overlayRefVar) {
        overlayRefVar.removeEventListener("click", handleOutsideClick);
      }
    };
  }, [onClose, visible, nonDismissable]);
  _react.useLayoutEffect.call(void 0, () => {
    if (visible) {
      if (visibleChanged) {
        prevFocusedElement.current = document.activeElement;
      }
      if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
        ref.current.focus();
      }
    } else if (visibleChanged && prevFocusedElement.current) {
      prevFocusedElement.current.focus();
    }
  }, [visible, visibleChanged, ref, autoFocus]);
  function onClickCloseButton(event) {
    event == null ? void 0 : event.stopPropagation();
    onClose();
  }
  function onSubmitForm(e) {
    e.preventDefault();
    e.stopPropagation();
    if (!submitDisabled && onSubmit) {
      onSubmit();
    }
  }
  function onClickCancel() {
    if (onCancel) {
      onCancel();
    } else {
      onClose();
    }
  }
  const linkIsHref = isSubmitLinkWithHref(submitLink);
  const linkIsRoute = !linkIsHref && submitLink;
  const displayCancelAbove = !!buttonOrder ? buttonOrder === "cancel-first" : !isSm;
  const displayCancelBelow = !!buttonOrder ? buttonOrder === "submit-first" : isSm;
  const buttonContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((_a, i) => {
      var _b = _a, { placement, text } = _b, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _b, ["placement", "text"]);
      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKKOBB4X5cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
    }),
    displayCancelAbove && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      _chunkKKOBB4X5cjs.Button,
      {
        disabled: cancelDisabled,
        onClick: onClickCancel,
        text: cancelText
      }
    ),
    (onSubmit || submitLink) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      _chunkKKOBB4X5cjs.Button,
      {
        kind: "primary",
        disabled: submitDisabled,
        icon: submitIcon,
        text: submitText != null ? submitText : "Continue",
        loading: submitLoading,
        loadingKind: submitLoadingKind,
        to: linkIsRoute ? submitLink.to : void 0,
        externalLink: linkIsHref ? submitLink.href : void 0,
        filename: linkIsHref ? submitLink.filename : void 0,
        type: submitLink ? "button" : "submit",
        onClick: submitLink ? onSubmit : void 0
      }
    ),
    displayCancelBelow && !cancelHidden && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      _chunkKKOBB4X5cjs.Button,
      {
        disabled: cancelDisabled,
        onClick: onClickCancel,
        text: cancelText
      }
    ),
    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((_c, i) => {
      var _d = _c, { placement, text } = _d, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _d, ["placement", "text"]);
      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKKOBB4X5cjs.Button, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { text }, rest), text || `no-text-${i}`);
    })
  ] });
  let titleContent = null;
  if (title) {
    const defaultTypography = {
      type: "Headline",
      heading: "h4",
      size: "Small"
    };
    const titleNodesWithTypography = _chunkYPB3YRAGcjs.setDefaultReactNodesTypography.call(void 0, title, {
      default: defaultTypography
    });
    titleContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalTitle, { children: _chunkDDGSFIWAcjs.toReactNodes.call(void 0, titleNodesWithTypography) });
  }
  let descriptionContent = null;
  if (description) {
    const defaultTypography = {
      type: "Body",
      size: "ExtraSmall"
    };
    const descriptionNodesWithTypography = _chunkYPB3YRAGcjs.setDefaultReactNodesTypography.call(void 0, 
      description,
      { default: defaultTypography }
    );
    descriptionContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalDescription, { children: _chunkDDGSFIWAcjs.toReactNodes.call(void 0, descriptionNodesWithTypography) });
  }
  let topContentNode = null;
  if (topContent) {
    if (_chunkDCH43ZYZcjs.isReactNode.call(void 0, topContent)) {
      topContentNode = topContent;
    } else {
      topContentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: _chunkZUAO4DW3cjs.Spacing.px.xl }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOTDIKLJRcjs.IconWithCircleBackground, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topContent)) });
    }
  }
  const modalContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
    progressBar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      _chunkXKV4MIWIcjs.ProgressBar,
      {
        progressPercentage: progressBar.progressPercentage,
        isSm: progressBar.isSm
      }
    ) }) : null,
    topContentNode,
    titleContent,
    descriptionContent,
    children,
    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalButtonColumn, { children: buttonContent }) : null
  ] });
  let content;
  if (smKind === "drawer" && isSm) {
    content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      _chunkXO5V3EX5cjs.Drawer,
      {
        onClose: () => onClickCloseButton(),
        closeButton: drawerCloseButton,
        nonDismissable,
        handleBack,
        kind: drawerKind != null ? drawerKind : "default",
        padding: drawerPadding !== void 0 ? `${drawerPadding}px` : void 0,
        top,
        alignBottom: drawerAlignBottom,
        disableTouchMove: drawerDisableTouchMove != null ? drawerDisableTouchMove : false,
        children: modalContent
      }
    );
  } else {
    content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
      !(smKind === "fullscreen" && bp2.isSm()) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
        ModalOverlay,
        {
          ref: overlayRef,
          voidOverlayBackground: voidOverlayBackground != null ? voidOverlayBackground : false
        }
      ) : null,
      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
        ModalContainer,
        {
          "aria-modal": true,
          "aria-hidden": true,
          tabIndex: -1,
          onClick: (event) => {
            event.stopPropagation();
          },
          role: "dialog",
          ref: modalContainerRef,
          top: top || (smKind === "default" ? _chunkRSHN4K6Ncjs.standardContentInset.smPx : 0),
          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalContent, { width, ghost, smKind, children: [
            !firstFocusRef && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
            !ghost && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalNavigation, { children: [
              handleBack ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: handleBack, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "ChevronLeft", width: 16 }) }) : topLeftIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, topLeftIcon)) : null,
              !nonDismissable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "Close", width: 9 }) })
            ] }),
            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalContentInner, { ghost, children: modalContent }),
            bottomContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "auto" }, children: bottomContent })
          ] })
        }
      )
    ] });
  }
  return visible && nodeReady && nodeRef.current ? _reactdom2.default.createPortal(
    onSubmit ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "form", { onSubmit: onSubmitForm, children: content }) : content,
    nodeRef.current
  ) : null;
}
var DefaultFocusTarget = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  position: absolute;
  top: -30px;
  width: 0;
  height: 0;
`;
var ModalOverlay = _styled2.default.div`
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: ${_chunkZU72XWNEcjs.z.modalOverlay};
  width: 100vw;
  height: 100vh;
  background: ${({ voidOverlayBackground }) => voidOverlayBackground ? "transparent" : "rgba(0, 0, 0, 0.5)"};
`;
var ModalContainer = _styled2.default.div`
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${_chunkZU72XWNEcjs.z.modalContainer};
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${({ theme }) => theme.text};
  ${(props) => `top: ${props.top}px;`}
`;
var contentTopMarginPx = 24;
var ModalDescription = _styled2.default.div`
  color: ${({ theme }) => theme.mcNeutral};
  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.sm};
  & + * {
    margin-top: ${contentTopMarginPx}px;
  }
`;
var ModalButtonRow = _styled2.default.div`
  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
  display: flex;
  ${_chunkKW3JYLRIcjs.bp.sm(`
    flex-direction: column;
  `)}
  gap: 10px;

  ${_chunkKKOBB4X5cjs.ButtonSelector.call(void 0, )} {
    width: 50%;
    ${_chunkKW3JYLRIcjs.bp.sm(`
      width: 100%;
    `)}
  }
`;
var ModalButtonColumn = _styled2.default.div`
  display: flex;
  flex-direction: column;
  gap: ${_chunkZUAO4DW3cjs.Spacing.px.sm};

  ${_chunkKKOBB4X5cjs.ButtonSelector.call(void 0, )} {
    width: 100%;
  }

  margin-top: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
`;
var ModalTitle = _styled2.default.div`
  margin: 0;
  & + *:not(${_chunk6VA4SAHQcjs.select.call(void 0, ModalDescription)}) {
    margin-top: ${contentTopMarginPx}px;
  }
`;
var ModalContent = _styled2.default.div`
  pointer-events: auto;
  transition: width 0.25s ease-in;

  ${({ theme, smKind, ghost }) => ghost ? "" : _chunkRSHN4K6Ncjs.overlaySurface.call(void 0, { theme, border: smKind !== "fullscreen" })}

  ${_chunkMFKERIW4cjs.overflowAutoWithoutScrollbars}
  ${_chunkRSHN4K6Ncjs.standardContentInset.smCSS.styles}
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;

  ${({ ghost, smKind, width }) => `
    ${ghost ? "" : _chunkRSHN4K6Ncjs.standardBorderRadius.call(void 0, 16)}
    width: ${width}px;
  `}

  ${({ smKind }) => smKind === "fullscreen" ? _chunkKW3JYLRIcjs.bp.sm(`
          border-radius: 0px;
          width: 100%;
          height: 100dvh;
        `) : ""}

  ${({ ghost }) => ghost ? "" : "padding: 16px 16px 40px;"}
`;
var ModalNavigation = _styled2.default.div`
  display: grid;
  grid-auto-flow: column;
  width: 100%;
`;
var BackButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
  width: 24px;
  height: 24px;
  justify-self: flex-start;
`;
var CloseButton = _styled2.default.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton)`
  ${_chunkRSHN4K6Ncjs.standardFocusOutline}
  width: 24px;
  height: 24px;
  justify-self: flex-end;
`;
var ModalContentInner = _styled2.default.div`
  ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
  ${(props) => props.ghost ? "" : `${_chunkKW3JYLRIcjs.bp.sm(`
    padding-left: 10px;
    padding-right: 10px;
  `)}`}
`;



exports.Modal = Modal;
