"use strict";
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const reactRemoveScroll = require("react-remove-scroll");
const styles_lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../../Autosuggest/Autosuggest.cjs");
const styles_lib_components_Heading_Heading_cjs = require("../../Heading/Heading.cjs");
const styles_lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
const styles_lib_components_Columns_Columns_cjs = require("../../Columns/Columns.cjs");
const styles_lib_components_Column_Column_cjs = require("../../Column/Column.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../../Accordion/AccordionItem.cjs");
const styles_lib_components_Button_Button_cjs = require("../../Button/Button.cjs");
const styles_lib_components_ContentBlock_ContentBlock_cjs = require("../../ContentBlock/ContentBlock.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../../Accordion/Accordion.cjs");
const styles_lib_components_ButtonIcon_ButtonIcon_cjs = require("../../ButtonIcon/ButtonIcon.cjs");
const styles_lib_components_private_Modal_Modal_css_cjs = require("./Modal.css.cjs");
const validPageBlockComponents = [
  "div",
  "article",
  "aside",
  "main",
  "section",
  "nav"
];
const gutters = { mobile: "xsmall", tablet: "gutter" };
const PageBlock = ({
  children,
  width = "large",
  component: componentProp,
  data,
  ...restProps
}) => {
  const component = componentProp && validPageBlockComponents.includes(componentProp) ? componentProp : "div";
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component,
      paddingX: gutters,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_ContentBlock_ContentBlock_cjs.ContentBlock, { width, children })
    }
  );
};
const modalPadding = { mobile: "gutter", tablet: "large" };
const ModalContentHeader = React.forwardRef(
  ({ title, headingLevel, description, descriptionId, center }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Stack_Stack_cjs.Stack,
    {
      space: headingLevel === "2" ? { mobile: "small", tablet: "medium" } : "small",
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Heading_Heading_cjs.Heading, { level: headingLevel, align: center ? "center" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
          styles_lib_components_Box_Box_cjs.Box,
          {
            ref,
            component: "span",
            tabIndex: -1,
            outline: "none",
            position: "relative",
            className: styles_lib_components_private_Modal_Modal_css_cjs.headingRoot,
            children: [
              title,
              /* @__PURE__ */ jsxRuntime.jsx(
                styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
                {
                  boxShadow: "outlineFocus",
                  borderRadius: "standard",
                  transition: "fast",
                  className: styles_lib_components_private_Modal_Modal_css_cjs.headingFocus,
                  onlyVisibleForKeyboardNavigation: true
                }
              )
            ]
          }
        ) }),
        description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { id: descriptionId, children: description }) : null
      ]
    }
  )
);
const ModalContent = ({
  id,
  children,
  description,
  onClose,
  width,
  closeLabel = "Close",
  illustration,
  title,
  headingRef: headingRefProp,
  modalRef: modalRefProp,
  scrollLock = true,
  position,
  headingLevel,
  data,
  ...restProps
}) => {
  const defaultModalRef = React.useRef(null);
  const modalRef = modalRefProp || defaultModalRef;
  const defaultHeadingRef = React.useRef(null);
  const headingRef = headingRefProp || defaultHeadingRef;
  const descriptionId = `${id}_desc`;
  const handleEscape = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Escape") {
      event.stopPropagation();
      onClose();
    }
  };
  const justifyContent = { left: "flexStart", center: "center", right: "flexEnd" }[position];
  const modalRadius = position === "center" ? "xlarge" : void 0;
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      role: "dialog",
      "aria-label": title,
      "aria-describedby": description ? descriptionId : void 0,
      "aria-modal": "true",
      id,
      onKeyDown: handleEscape,
      position: "relative",
      width: "full",
      height: "full",
      display: "flex",
      alignItems: "center",
      justifyContent,
      children: /* @__PURE__ */ jsxRuntime.jsxs(
        styles_lib_components_Box_Box_cjs.Box,
        {
          position: "relative",
          display: "flex",
          alignItems: "center",
          justifyContent,
          height: position === "right" || position === "left" ? "full" : void 0,
          overflow: position !== "center" ? "hidden" : void 0,
          boxShadow: "large",
          borderRadius: modalRadius,
          width: width !== "content" ? "full" : void 0,
          maxWidth: width !== "content" ? width : void 0,
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { ref: modalRef, forwardProps: true, enabled: scrollLock, children: /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Box_Box_cjs.Box,
              {
                background: "surface",
                borderRadius: modalRadius,
                overflow: "auto",
                position: "relative",
                width: width !== "content" ? "full" : void 0,
                height: position === "right" || position === "left" ? "full" : void 0,
                paddingY: modalPadding,
                paddingX: position !== "center" ? gutters : modalPadding,
                className: [
                  styles_lib_components_private_Modal_Modal_css_cjs.pointerEventsAll,
                  position === "center" && styles_lib_components_private_Modal_Modal_css_cjs.maxSize[position]
                ],
                ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
                children: /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "large", children: [
                  illustration ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "medium", align: "center", children: [
                    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingX: "gutter", children: illustration }),
                    /* @__PURE__ */ jsxRuntime.jsx(
                      ModalContentHeader,
                      {
                        title,
                        headingLevel,
                        description,
                        descriptionId,
                        center: Boolean(illustration),
                        ref: headingRef
                      }
                    )
                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "none", children: [
                    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
                      ModalContentHeader,
                      {
                        title,
                        headingLevel,
                        description,
                        descriptionId,
                        center: Boolean(illustration),
                        ref: headingRef
                      }
                    ) }),
                    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { width: "touchable" }) })
                  ] }),
                  /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children })
                ] })
              }
            ) }),
            /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Box_Box_cjs.Box,
              {
                position: "absolute",
                zIndex: "sticky",
                top: 0,
                pointerEvents: "none",
                width: "full",
                display: "flex",
                justifyContent: "flexEnd",
                paddingTop: modalPadding,
                paddingRight: position !== "center" ? gutters : modalPadding,
                className: position === "center" && styles_lib_components_private_Modal_Modal_css_cjs.maxSize[position],
                children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.Bleed, { space: "xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
                  styles_lib_components_Box_Box_cjs.Box,
                  {
                    position: "relative",
                    background: "surface",
                    borderRadius: "full",
                    padding: "xsmall",
                    className: [styles_lib_components_private_Modal_Modal_css_cjs.closeIconOffset, styles_lib_components_private_Modal_Modal_css_cjs.pointerEventsAll],
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      styles_lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
                      {
                        id: `${id}-close`,
                        label: closeLabel,
                        icon: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconClear, {}),
                        tone: "secondary",
                        variant: "transparent",
                        size: "large",
                        onClick: onClose
                      }
                    )
                  }
                ) })
              }
            )
          ]
        }
      )
    }
  );
};
exports.ModalContent = ModalContent;
exports.PageBlock = PageBlock;
