@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-XDP4HLQ3.js

@@ -0,0 +1,724 @@
+import {
+  dynamicViewportHeight,
+  safeAreaBottom
+} from "./chunk-TSPG6TWK.js";
+
+// src/components/feedback/StackedModal/StackedModal.tsx
+import { Dialog, Slide, styled as styled2 } from "@mui/material";
+import { forwardRef, useId } from "react";
+
+// src/components/feedback/StackedModal/StackedModal.hooks.ts
+import { useMediaQuery, useTheme } from "@mui/material";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/feedback/StackedModal/modal-stack.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var BASE_Z_INDEX = 1300;
+var Z_INDEX_STEP = 10;
+var noop = () => {
+};
+var ModalStackContext = createContext({
+  stack: [],
+  pushModal: noop,
+  popModal: noop,
+  clearStack: noop,
+  currentDepth: 0,
+  isModalInStack: () => false,
+  getModalRole: () => null
+});
+var useModalStack = () => {
+  const context = useContext(ModalStackContext);
+  if (!context) {
+    throw new Error("useModalStack must be used within a ModalStackProvider");
+  }
+  return context;
+};
+var roleAt = (index, depth) => {
+  if (index === depth - 1) return "primary";
+  if (index === depth - 2) return "secondary";
+  return "background";
+};
+var withRoles = (stack) => stack.map((modal, index) => ({ ...modal, role: roleAt(index, stack.length) }));
+var useBodyScrollLock = (locked) => {
+  const originalOverflow = useRef("");
+  useEffect(() => {
+    const restore = () => {
+      if (!originalOverflow.current) return;
+      document.body.style.overflow = originalOverflow.current;
+      originalOverflow.current = "";
+    };
+    if (locked) {
+      if (!originalOverflow.current) {
+        originalOverflow.current = document.body.style.overflow || "";
+      }
+      document.body.style.overflow = "hidden";
+    } else {
+      restore();
+    }
+    return restore;
+  }, [locked]);
+};
+var ModalStackProvider = ({ children }) => {
+  const [stack, setStack] = useState([]);
+  useBodyScrollLock(stack.length > 0);
+  const pushModal = useCallback((modalId) => {
+    setStack((prev) => {
+      if (prev.some((m) => m.id === modalId)) return prev;
+      const entry = {
+        id: modalId,
+        zIndex: BASE_Z_INDEX + prev.length * Z_INDEX_STEP,
+        role: "primary"
+      };
+      return withRoles([...prev, entry]);
+    });
+  }, []);
+  const popModal = useCallback((modalId) => {
+    setStack(
+      (prev) => withRoles(modalId ? prev.filter((m) => m.id !== modalId) : prev.slice(0, -1))
+    );
+  }, []);
+  const clearStack = useCallback(() => setStack([]), []);
+  const isModalInStack = useCallback(
+    (modalId) => stack.some((m) => m.id === modalId),
+    [stack]
+  );
+  const getModalRole = useCallback(
+    (modalId) => stack.find((m) => m.id === modalId)?.role ?? null,
+    [stack]
+  );
+  const value = useMemo(
+    () => ({
+      stack,
+      pushModal,
+      popModal,
+      clearStack,
+      currentDepth: stack.length,
+      isModalInStack,
+      getModalRole
+    }),
+    [stack, pushModal, popModal, clearStack, isModalInStack, getModalRole]
+  );
+  return /* @__PURE__ */ jsx(ModalStackContext.Provider, { value, children });
+};
+
+// src/components/feedback/StackedModal/StackedModal.hooks.ts
+var FOCUSABLE = 'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])';
+var FALLBACK_Z_INDEX = 1300;
+var ROLE_TRANSITION_MS = 300;
+var useFocusTrap = (ref, isActive, disabled) => {
+  useEffect2(() => {
+    if (!isActive || disabled || !ref.current) return;
+    const element = ref.current;
+    const focusable = element.querySelectorAll(FOCUSABLE);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    window.setTimeout(() => first?.focus(), 100);
+    const handleTabKey = (e) => {
+      if (e.key !== "Tab") return;
+      const atEdge = e.shiftKey ? first : last;
+      if (document.activeElement !== atEdge) return;
+      e.preventDefault();
+      (e.shiftKey ? last : first)?.focus();
+    };
+    element.addEventListener("keydown", handleTabKey);
+    return () => element.removeEventListener("keydown", handleTabKey);
+  }, [ref, isActive, disabled]);
+};
+var useEscapeToClose = (active, onClose) => {
+  useEffect2(() => {
+    if (!active) return;
+    const handleEsc = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [active, onClose]);
+};
+var useSkeleton = (loading) => {
+  const [showSkeleton, setShowSkeleton] = useState2(loading);
+  useEffect2(() => {
+    if (loading) {
+      setShowSkeleton(true);
+      return;
+    }
+    const timer = window.setTimeout(() => setShowSkeleton(false), 200);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+  return showSkeleton;
+};
+var useStackRegistration = (open, modalId) => {
+  const { pushModal, popModal, isModalInStack } = useModalStack();
+  const hasRegisteredRef = useRef2(false);
+  useEffect2(() => {
+    if (open && !hasRegisteredRef.current) {
+      pushModal(modalId);
+      hasRegisteredRef.current = true;
+    } else if (!open) {
+      hasRegisteredRef.current = false;
+    }
+  }, [open, modalId, pushModal]);
+  useEffect2(() => {
+    if (open || !isModalInStack(modalId)) return;
+    const timer = window.setTimeout(() => popModal(modalId), ROLE_TRANSITION_MS);
+    return () => window.clearTimeout(timer);
+  }, [open, modalId, popModal, isModalInStack]);
+};
+var usePanelChrome = (options) => {
+  const { open, modalId, loading, closeOnEsc, closeOnClickOutside, disableFocusTrap, onClose } = options;
+  const dialogRef = useRef2(null);
+  const { currentDepth } = useModalStack();
+  const { modalRole, isAnimating } = useModalRole(Boolean(open), modalId);
+  const showSkeleton = useSkeleton(Boolean(loading));
+  const zIndex = usePanelZIndex(modalId, FALLBACK_Z_INDEX);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isPrimary = modalRole === "primary";
+  const canGoBack = currentDepth > 1;
+  useFocusTrap(dialogRef, Boolean(open) && isPrimary, disableFocusTrap);
+  useEscapeToClose(Boolean(open && closeOnEsc) && isPrimary, onClose);
+  const { handleBack, handleClose } = useCloseHandlers({
+    isPrimary,
+    closeOnClickOutside,
+    closeOnEsc,
+    canGoBack,
+    onClose
+  });
+  return {
+    dialogRef,
+    modalRole,
+    isAnimating,
+    showSkeleton,
+    zIndex,
+    isMobile,
+    canGoBack,
+    handleBack,
+    handleClose
+  };
+};
+var useCloseHandlers = ({
+  isPrimary,
+  closeOnClickOutside,
+  closeOnEsc,
+  canGoBack,
+  onClose
+}) => ({
+  handleBack: () => {
+    if (canGoBack) onClose();
+  },
+  handleClose: (_event, reason) => {
+    if (!isPrimary) return;
+    if (reason === "backdropClick" && !closeOnClickOutside) return;
+    if (reason === "escapeKeyDown" && !closeOnEsc) return;
+    onClose();
+  }
+});
+var usePanelZIndex = (modalId, fallback) => {
+  const { stack } = useModalStack();
+  return stack.find((m) => m.id === modalId)?.zIndex ?? fallback;
+};
+var useModalRole = (open, modalId) => {
+  const { stack } = useModalStack();
+  const [modalRole, setModalRole] = useState2("primary");
+  const [isAnimating, setIsAnimating] = useState2(false);
+  useStackRegistration(open, modalId);
+  useEffect2(() => {
+    if (!open) return;
+    const newRole = stack.find((m) => m.id === modalId)?.role;
+    if (!newRole || newRole === modalRole) return;
+    setIsAnimating(true);
+    setModalRole(newRole);
+    const timer = window.setTimeout(() => setIsAnimating(false), ROLE_TRANSITION_MS);
+    return () => window.clearTimeout(timer);
+  }, [stack, modalId, open, modalRole]);
+  return { modalRole, isAnimating };
+};
+
+// src/components/feedback/StackedModal/StackedModal.parts.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Box,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Skeleton,
+  styled,
+  Typography
+} from "@mui/material";
+import React from "react";
+
+// src/components/feedback/StackedModal/StackedModal.styles.ts
+import { alpha } from "@mui/material";
+var STYLE_ONLY_PROPS = ["modalRole", "isAnimating", "glass", "rtl", "customMaxWidth"];
+var MAX_WIDTH_PX = {
+  xs: 444,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+};
+var BACKDROP_BY_ROLE = {
+  secondary: "rgba(0, 0, 0, 0.3)",
+  background: "rgba(0, 0, 0, 0.1)"
+};
+var ANIMATION_BY_ROLE = {
+  secondary: "expandModal 300ms ease-in-out forwards",
+  primary: "contractModal 300ms ease-in-out forwards"
+};
+var KEYFRAMES = {
+  "@keyframes expandModal": {
+    from: { width: "60vw", transform: "translateX(0)" },
+    to: { width: "100vw", transform: "translateX(0)" }
+  },
+  "@keyframes contractModal": {
+    from: { width: "100vw", transform: "translateX(0)" },
+    to: { width: "60vw", transform: "translateX(0)" }
+  }
+};
+var cap = (customMaxWidth) => customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
+var panelWidth = (share, capPx) => capPx ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` } : { width: share, maxWidth: share };
+var backdropStyles = (modalRole) => ({
+  backgroundColor: (modalRole && BACKDROP_BY_ROLE[modalRole]) ?? "rgba(0, 0, 0, 0.5)",
+  backdropFilter: modalRole === "primary" ? "blur(4px)" : "none"
+});
+var primaryPanelStyles = (theme, capPx) => ({
+  [theme.breakpoints.down("sm")]: panelWidth("100%", capPx),
+  [theme.breakpoints.between("sm", "lg")]: panelWidth("80vw", capPx),
+  [theme.breakpoints.up("lg")]: panelWidth("60vw", capPx),
+  "@media (min-width:2200px)": panelWidth("40vw", capPx)
+});
+var secondaryPanelStyles = () => ({
+  width: "100vw !important",
+  maxWidth: "100vw !important",
+  right: "0 !important",
+  top: "0 !important",
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: "0 !important",
+  opacity: 0.95,
+  transform: "scale(1)"
+});
+var rolePanelStyles = (theme, role, capPx) => {
+  if (role === "primary") return primaryPanelStyles(theme, capPx);
+  if (role === "secondary") return secondaryPanelStyles();
+  if (role === "background") return { display: "none" };
+  return {};
+};
+var glassStyles = (theme, glass, role) => glass && role === "primary" ? {
+  backgroundColor: alpha(theme.palette.background.paper, 0.85),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+} : {};
+var animationStyles = (isAnimating, role) => isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? "none" } : {};
+var panelBaseStyles = (theme) => ({
+  margin: 0,
+  position: "fixed",
+  right: 0,
+  top: 0,
+  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the
+  // browser toolbar, which parks the tail of the scroll area (the submit row)
+  // out of reach. See `dynamicViewportHeight`.
+  ...dynamicViewportHeight("height", "maxHeight"),
+  borderRadius: 0,
+  willChange: "transform, width, border-radius",
+  transition: theme.transitions.create(
+    ["width", "max-width", "border-radius", "transform", "opacity"],
+    { duration: 300, easing: theme.transitions.easing.easeInOut }
+  )
+});
+var panelStyles = (theme, props) => {
+  const capPx = cap(props.customMaxWidth);
+  return {
+    ...panelBaseStyles(theme),
+    ...rolePanelStyles(theme, props.modalRole, capPx),
+    ...glassStyles(theme, props.glass, props.modalRole),
+    ...animationStyles(props.isAnimating, props.modalRole)
+  };
+};
+var dialogRootStyles = (theme, props) => ({
+  direction: props.rtl ? "rtl" : "ltr",
+  "& .MuiBackdrop-root": backdropStyles(props.modalRole),
+  "& .MuiDialog-container": { alignItems: "flex-start", justifyContent: "flex-end" },
+  "& .MuiDialog-paper": panelStyles(theme, props),
+  ...KEYFRAMES
+});
+var titleStyles = (theme, rtl) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: theme.spacing(2, 2.5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  direction: rtl ? "rtl" : "ltr"
+});
+var titleLeftStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  flex: 1
+});
+var titleRightStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+});
+var loadingOverlayStyles = (theme) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: alpha(theme.palette.background.paper, 0.8),
+  zIndex: 9999
+});
+var modalContentStyles = (theme) => ({
+  padding: theme.spacing(3),
+  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is
+  // NOT the element that scrolls — ModalBody above it is, and this box always
+  // ends up exactly as tall as its own content. A scroll container that never
+  // scrolls is still the containing block for every `position: sticky`
+  // descendant, so a sticky header anchored here gets zero travel and rides the
+  // content out of view: sticky, and pinned to nothing. Handing the overflow
+  // back to ModalBody makes the panel's own scroller the anchor.
+  overflowY: "visible"
+});
+
+// src/components/feedback/StackedModal/StackedModal.parts.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var StyledDialogTitle = styled(DialogTitle, {
+  shouldForwardProp: (prop) => prop !== "rtl"
+})(({ theme, rtl }) => titleStyles(theme, rtl));
+var DialogTitleLeft = styled(Box)(({ theme }) => titleLeftStyles(theme));
+var DialogTitleRight = styled(Box)(({ theme }) => titleRightStyles(theme));
+var LoadingOverlay = styled(Box)(({ theme }) => loadingOverlayStyles(theme));
+var StackedModalContent = styled(DialogContent)(
+  ({ theme }) => modalContentStyles(theme)
+);
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var StackedModalActions = ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children });
+var splitModalChildren = (children) => {
+  let actions = null;
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === StackedModalActions) {
+      actions = child.props.children;
+    }
+  });
+  const content = React.Children.toArray(children).filter(
+    (child) => !(React.isValidElement(child) && child.type === StackedModalActions)
+  );
+  return { content, actions };
+};
+var resolveModalContent = (children, actions, isMobile) => {
+  const { content, actions: childActions } = splitModalChildren(children);
+  const modalActions = childActions ?? actions;
+  return {
+    content,
+    modalActions,
+    headerActions: isMobile ? null : modalActions,
+    hasMobileActions: Boolean(isMobile && modalActions)
+  };
+};
+var modalAriaIds = (modalId, ariaLabelledBy, ariaDescribedBy) => ({
+  titleId: ariaLabelledBy || `modal-title-${modalId}`,
+  descId: ariaDescribedBy || `modal-desc-${modalId}`
+});
+var ModalLoadingOverlay = ({
+  loadingText,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(LoadingOverlay, { "data-testid": testId(dataTestId, "loading-overlay"), children: [
+  /* @__PURE__ */ jsx2(CircularProgress, { size: 40, "data-testid": testId(dataTestId, "loading-spinner") }),
+  loadingText && /* @__PURE__ */ jsx2(Typography, { variant: "body2", sx: { mt: 2 }, "data-testid": testId(dataTestId, "loading-text"), children: loadingText })
+] });
+var HeaderLeadingButton = ({ canGoBack, onBack, onClose, hideClose, rtl, dataTestId }) => {
+  if (canGoBack) {
+    return /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        edge: "start",
+        color: "inherit",
+        onClick: onBack,
+        "aria-label": "go back",
+        size: "small",
+        sx: { transform: rtl ? "rotate(180deg)" : "none" },
+        "data-testid": testId(dataTestId, "back-button"),
+        children: /* @__PURE__ */ jsx2(ChevronLeftIcon, {})
+      }
+    );
+  }
+  if (hideClose) return null;
+  return /* @__PURE__ */ jsx2(
+    IconButton,
+    {
+      edge: "start",
+      color: "inherit",
+      onClick: onClose,
+      "aria-label": "close",
+      size: "small",
+      "data-testid": testId(dataTestId, "close-button"),
+      children: /* @__PURE__ */ jsx2(CloseIcon, {})
+    }
+  );
+};
+var ModalHeader = ({
+  titleId,
+  navigationTitle,
+  canGoBack,
+  onBack,
+  onClose,
+  hideClose,
+  headerActions,
+  rtl,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(StyledDialogTitle, { id: titleId, rtl, "data-testid": testId(dataTestId, "header"), children: [
+  /* @__PURE__ */ jsxs(DialogTitleLeft, { children: [
+    /* @__PURE__ */ jsx2(
+      HeaderLeadingButton,
+      {
+        canGoBack,
+        onBack,
+        onClose,
+        hideClose,
+        rtl,
+        dataTestId
+      }
+    ),
+    navigationTitle && /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        variant: "h6",
+        component: "h2",
+        noWrap: true,
+        sx: { ml: canGoBack || !hideClose ? 1 : 0 },
+        "data-testid": testId(dataTestId, "title"),
+        children: navigationTitle
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx2(DialogTitleRight, { "data-testid": testId(dataTestId, "header-actions"), children: headerActions })
+] });
+var ContentSkeleton = () => /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+  /* @__PURE__ */ jsx2(Skeleton, { variant: "text", width: "60%", height: 32 }),
+  /* @__PURE__ */ jsx2(Skeleton, { variant: "text", width: "100%" }),
+  /* @__PURE__ */ jsx2(Skeleton, { variant: "text", width: "100%" }),
+  /* @__PURE__ */ jsx2(Skeleton, { variant: "rectangular", height: 200, sx: { mt: 2 } })
+] });
+var ModalBody = ({
+  descId,
+  showSkeleton,
+  endsPanel,
+  dataTestId,
+  children
+}) => /* @__PURE__ */ jsx2(
+  Box,
+  {
+    id: descId,
+    sx: {
+      position: "relative",
+      flex: 1,
+      overflow: "auto",
+      // iOS momentum scrolling, and no scroll-chaining to the page behind —
+      // without `contain`, an overscroll at the end of the list rubber-bands the
+      // whole panel and springs back before the last row can be tapped.
+      WebkitOverflowScrolling: "touch",
+      overscrollBehavior: "contain",
+      // The content itself ends the panel when there is no action bar, so it has
+      // to clear the home indicator on its own.
+      ...endsPanel ? safeAreaBottom(0) : {}
+    },
+    "data-testid": testId(dataTestId, "content"),
+    children: showSkeleton ? /* @__PURE__ */ jsx2(ContentSkeleton, {}) : children
+  }
+);
+var ModalFooter = ({
+  dataTestId,
+  children
+}) => /* @__PURE__ */ jsx2(
+  DialogActions,
+  {
+    sx: {
+      borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+      padding: 2,
+      // Never let the action row sit under the iOS home indicator.
+      flexShrink: 0,
+      ...safeAreaBottom(16)
+    },
+    "data-testid": testId(dataTestId, "footer"),
+    children
+  }
+);
+var ModalPanelContents = ({
+  showSkeleton,
+  loadingText,
+  descId,
+  content,
+  modalActions,
+  hasMobileActions,
+  ...header
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showSkeleton && /* @__PURE__ */ jsx2(ModalLoadingOverlay, { loadingText, dataTestId: header.dataTestId }),
+  /* @__PURE__ */ jsx2(ModalHeader, { ...header }),
+  /* @__PURE__ */ jsx2(
+    ModalBody,
+    {
+      descId,
+      showSkeleton,
+      endsPanel: !hasMobileActions,
+      dataTestId: header.dataTestId,
+      children: content
+    }
+  ),
+  hasMobileActions && /* @__PURE__ */ jsx2(ModalFooter, { dataTestId: header.dataTestId, children: modalActions })
+] });
+
+// src/components/feedback/StackedModal/StackedModal.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StyledDialog = styled2(Dialog, {
+  shouldForwardProp: (prop) => !STYLE_ONLY_PROPS.includes(prop)
+})(({ theme, ...props }) => dialogRootStyles(theme, props));
+var SlideTransition = forwardRef(
+  function SlideTransition2(props, ref) {
+    return /* @__PURE__ */ jsx3(Slide, { direction: "left", ref, ...props, children: props.children });
+  }
+);
+var DEFAULTS = {
+  open: false,
+  glass: false,
+  navigationTitle: "",
+  closeOnClickOutside: true,
+  closeOnEsc: true,
+  loading: false,
+  loadingText: "Loading...",
+  maxWidth: false,
+  disableBackdrop: false,
+  disableFocusTrap: false,
+  keepMounted: false,
+  rtl: false
+};
+var withDefaults = (props) => {
+  const resolved = { ...props };
+  for (const [key, value] of Object.entries(DEFAULTS)) {
+    const prop = key;
+    if (resolved[prop] === void 0) {
+      Object.assign(resolved, { [prop]: value });
+    }
+  }
+  return resolved;
+};
+var StackedModalPanel = (props) => {
+  const {
+    open,
+    onClose,
+    glass,
+    navigationTitle,
+    hideClose,
+    children,
+    actions,
+    modalId,
+    closeOnClickOutside,
+    closeOnEsc,
+    loading,
+    loadingText,
+    fullScreen,
+    maxWidth,
+    disableBackdrop,
+    disableFocusTrap,
+    keepMounted,
+    rtl,
+    dataTestId,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...otherProps
+  } = props;
+  const {
+    dialogRef,
+    modalRole,
+    isAnimating,
+    showSkeleton,
+    zIndex,
+    isMobile,
+    canGoBack,
+    handleBack,
+    handleClose
+  } = usePanelChrome({
+    open,
+    modalId,
+    loading,
+    closeOnEsc,
+    closeOnClickOutside,
+    disableFocusTrap,
+    onClose
+  });
+  if (modalRole === "background" && !keepMounted) return null;
+  const { content, modalActions, headerActions, hasMobileActions } = resolveModalContent(
+    children,
+    actions,
+    isMobile
+  );
+  const { titleId, descId } = modalAriaIds(modalId, ariaLabelledBy, ariaDescribedBy);
+  return /* @__PURE__ */ jsx3(
+    StyledDialog,
+    {
+      ref: dialogRef,
+      open: Boolean(open),
+      onClose: handleClose,
+      fullScreen: fullScreen ?? isMobile,
+      modalRole,
+      isAnimating,
+      glass,
+      rtl,
+      customMaxWidth: maxWidth,
+      TransitionComponent: SlideTransition,
+      maxWidth,
+      disableEscapeKeyDown: !closeOnEsc,
+      hideBackdrop: disableBackdrop,
+      keepMounted,
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      "data-testid": dataTestId,
+      sx: { zIndex },
+      ...otherProps,
+      children: /* @__PURE__ */ jsx3(
+        ModalPanelContents,
+        {
+          showSkeleton,
+          loadingText,
+          titleId,
+          descId,
+          navigationTitle,
+          hideClose,
+          canGoBack,
+          onBack: handleBack,
+          onClose,
+          headerActions,
+          content,
+          modalActions,
+          hasMobileActions,
+          rtl,
+          dataTestId
+        }
+      )
+    }
+  );
+};
+var StackedModal = (props) => {
+  const fallbackId = useId();
+  const resolved = withDefaults(props);
+  return /* @__PURE__ */ jsx3(StackedModalPanel, { ...resolved, modalId: resolved.modalId ?? fallbackId });
+};
+
+export {
+  useModalStack,
+  ModalStackProvider,
+  StackedModalContent,
+  StackedModalActions,
+  StackedModal
+};
+//# sourceMappingURL=chunk-XDP4HLQ3.js.map