@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-PVLDKXKR.js

@@ -1,732 +0,0 @@
-import {
-  dynamicViewportHeight,
-  safeAreaBottom
-} from "./chunk-TSPG6TWK.js";
-import {
-  MODAL_STACK_BASE_Z_INDEX,
-  MODAL_STACK_Z_INDEX_STEP
-} from "./chunk-MQLM43E4.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 = MODAL_STACK_BASE_Z_INDEX;
-var Z_INDEX_STEP = MODAL_STACK_Z_INDEX_STEP;
-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, backLabel, onClose, hideClose, rtl, dataTestId }) => {
-  if (canGoBack) {
-    return /* @__PURE__ */ jsx2(
-      IconButton,
-      {
-        edge: "start",
-        color: "inherit",
-        onClick: onBack,
-        "aria-label": backLabel,
-        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,
-  backLabel,
-  headerActions,
-  rtl,
-  dataTestId
-}) => /* @__PURE__ */ jsxs(StyledDialogTitle, { id: titleId, rtl, "data-testid": testId(dataTestId, "header"), children: [
-  /* @__PURE__ */ jsxs(DialogTitleLeft, { children: [
-    /* @__PURE__ */ jsx2(
-      HeaderLeadingButton,
-      {
-        canGoBack,
-        onBack,
-        backLabel,
-        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,
-    backLabel,
-    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,
-        {
-          backLabel,
-          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-PVLDKXKR.js.map