@sproutsocial/seeds-react-modal 2.5.9 → 2.5.22

package/.turbo/turbo-build.log

@@ -8,34 +8,34 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
+CJS dist/index.js        38.32 KB
 CJS dist/v1/index.js     10.31 KB
-CJS dist/v2/index.js     32.96 KB
-CJS dist/index.js        41.42 KB
+CJS dist/v2/index.js     29.85 KB
+CJS dist/index.js.map    76.00 KB
 CJS dist/v1/index.js.map 14.56 KB
-CJS dist/v2/index.js.map 67.35 KB
-CJS dist/index.js.map    82.23 KB
-CJS ⚡️ Build success in 35ms
+CJS dist/v2/index.js.map 61.12 KB
+CJS ⚡️ Build success in 70ms
 ESM dist/esm/index.js              733.00 B
-ESM dist/esm/chunk-XQ2A6HDC.js     27.90 KB
+ESM dist/esm/chunk-KZ6XTIWT.js     24.80 KB
 ESM dist/esm/chunk-72GBDCA2.js     7.57 KB
 ESM dist/esm/v2/index.js           746.00 B
 ESM dist/esm/v1/index.js           165.00 B
 ESM dist/esm/index.js.map          1.16 KB
-ESM dist/esm/chunk-XQ2A6HDC.js.map 66.27 KB
 ESM dist/esm/chunk-72GBDCA2.js.map 14.38 KB
+ESM dist/esm/chunk-KZ6XTIWT.js.map 60.04 KB
 ESM dist/esm/v2/index.js.map       71.00 B
 ESM dist/esm/v1/index.js.map       71.00 B
-ESM ⚡️ Build success in 36ms
+ESM ⚡️ Build success in 70ms
 DTS Build start
-DTS ⚡️ Build success in 4237ms
+DTS ⚡️ Build success in 4230ms
 DTS dist/index.d.ts                          1.07 KB
 DTS dist/v1/index.d.ts                       413.00 B
 DTS dist/v2/index.d.ts                       1.16 KB
 DTS dist/Modal-DTeKLfEI.d.ts                 2.52 KB
-DTS dist/ModalExternalTrigger-BnbJk9zY.d.ts  23.41 KB
+DTS dist/ModalExternalTrigger-Bciv1N-P.d.ts  23.37 KB
 DTS dist/index.d.mts                         1.08 KB
 DTS dist/v1/index.d.mts                      415.00 B
 DTS dist/v2/index.d.mts                      1.16 KB
 DTS dist/Modal-DTeKLfEI.d.mts                2.52 KB
-DTS dist/ModalExternalTrigger-BnbJk9zY.d.mts 23.41 KB
-Done in 4.99s.
+DTS dist/ModalExternalTrigger-Bciv1N-P.d.mts 23.37 KB
+Done in 5.20s.

package/CHANGELOG.md

@@ -1,5 +1,131 @@
 # @sproutsocial/seeds-react-modal
 
+## 2.5.22
+
+### Patch Changes
+
+- Updated dependencies [69c9d02]
+  - @sproutsocial/seeds-react-icon@2.4.0
+  - @sproutsocial/seeds-react-button@2.2.1
+
+## 2.5.21
+
+### Patch Changes
+
+- Updated dependencies [edc1819]
+  - @sproutsocial/seeds-react-text@1.4.3
+
+## 2.5.20
+
+### Patch Changes
+
+- Updated dependencies [456a20f]
+- Updated dependencies [5892f44]
+  - @sproutsocial/seeds-react-button@2.2.0
+  - @sproutsocial/seeds-react-system-props@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.21
+  - @sproutsocial/seeds-react-icon@2.3.13
+  - @sproutsocial/seeds-react-text@1.4.2
+
+## 2.5.19
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+- Updated dependencies [a0fe3d3]
+  - @sproutsocial/seeds-react-theme@4.1.0
+  - @sproutsocial/seeds-react-button@2.1.3
+  - @sproutsocial/seeds-react-box@1.1.20
+  - @sproutsocial/seeds-react-icon@2.3.12
+
+## 2.5.18
+
+### Patch Changes
+
+- cdae6fb: Temporarily remove Modal v2's mobile bottom-sheet behavior. The bottom sheet was a
+  CSS/Motion illusion keyed to a Modal-specific 780px breakpoint, which conflicted with the
+  shared 640px breakpoint used by Drawer/Panel/PeekIn (where a Modal rendered "on desktop"
+  could independently snap to a bottom sheet in the 641–780px range). Modal now renders as a
+  centered dialog at every viewport. No public API changes — `TypeModalProps`, all exported
+  sub-components, and the hooks are unchanged. The real Drawer-based mobile bottom sheet will
+  be reintroduced post-migration using the shared `useIsMobile` breakpoint.
+
+## 2.5.17
+
+### Patch Changes
+
+- Updated dependencies [cb27f07]
+  - @sproutsocial/seeds-react-button@2.1.2
+
+## 2.5.16
+
+### Patch Changes
+
+- Updated dependencies [40d2dfe]
+  - @sproutsocial/seeds-react-button@2.1.1
+
+## 2.5.15
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-button@2.1.0
+  - @sproutsocial/seeds-react-theme@4.0.0
+  - @sproutsocial/seeds-react-system-props@3.1.0
+  - @sproutsocial/seeds-react-box@1.1.19
+  - @sproutsocial/seeds-react-icon@2.3.11
+  - @sproutsocial/seeds-react-text@1.4.1
+
+## 2.5.14
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.3.10
+- @sproutsocial/seeds-react-button@2.0.8
+
+## 2.5.13
+
+### Patch Changes
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+  - @sproutsocial/seeds-react-box@1.1.18
+  - @sproutsocial/seeds-react-icon@2.3.9
+  - @sproutsocial/seeds-react-button@2.0.7
+
+## 2.5.12
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+  - @sproutsocial/seeds-react-box@1.1.17
+  - @sproutsocial/seeds-react-icon@2.3.8
+  - @sproutsocial/seeds-react-button@2.0.6
+
+## 2.5.11
+
+### Patch Changes
+
+- 277bfb0: Fix a batch of UX and accessibility issues in the v3 combobox / searchable-select components (`SingleCombobox`, `MultiCombobox`, `SingleSearchableSelect`, `MultiSearchableSelect`, `SingleSelect`, `MultiSelect`), plus a related Modal v2 fix:
+
+  - **New `isInvalid` prop** renders the red error border on the input group / trigger and the error color on the chevron, and forwards `aria-invalid` to the underlying input.
+  - **`required` is now forwarded as `aria-required`** so screen readers correctly announce required state.
+  - **Token chips have a visible gap** (`theme.space[200]`) in `MultiCombobox` instead of butting up against each other.
+  - **Escape on a closed combobox no longer clears the input and selection.** A new `useSuppressEscapeClear` hook stops the synthetic Escape event in capture phase when the popup is closed, suppressing Base UI's default clear-on-escape behavior while leaving popup-open Escape and Modal-Escape unaffected.
+  - **Escape inside a Modal / Drawer only closes the dropdown**, not the surrounding dialog. Fixed in Modal v2: when an open Base UI popup is detected inside the dialog, the modal's escape handler defers to the popup's own escape handling.
+  - **Focus stays on the input when removing a token** in `MultiCombobox` (previously punted to the modal container).
+  - **The clear (X) button and token-remove buttons are keyboard-focusable** and render a `:focus-visible` focus ring.
+
+## 2.5.10
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.3.7
+- @sproutsocial/seeds-react-button@2.0.5
+
 ## 2.5.9
 
 ### Patch Changes

package/dist/{ModalExternalTrigger-BnbJk9zY.d.mts → ModalExternalTrigger-Bciv1N-P.d.mts}

@@ -325,7 +325,6 @@ type TypeModalProps = TypeModalPropsWithTitle | TypeModalPropsWithSubtitleOnly |
  * - Controlled and uncontrolled state modes
  * - Optional draggable behavior for side-by-side interaction
  * - Floating action rail for quick actions like close, expand, etc.
- * - Responsive bottom sheet layout on mobile
  *
  * @example
  * // Simple uncontrolled modal

package/dist/{ModalExternalTrigger-BnbJk9zY.d.ts → ModalExternalTrigger-Bciv1N-P.d.ts}

@@ -325,7 +325,6 @@ type TypeModalProps = TypeModalPropsWithTitle | TypeModalPropsWithSubtitleOnly |
  * - Controlled and uncontrolled state modes
  * - Optional draggable behavior for side-by-side interaction
  * - Floating action rail for quick actions like close, expand, etc.
- * - Responsive bottom sheet layout on mobile
  *
  * @example
  * // Simple uncontrolled modal

package/dist/esm/{chunk-XQ2A6HDC.js → chunk-KZ6XTIWT.js}

@@ -1,5 +1,5 @@
 // src/v2/Modal.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import * as Dialog6 from "@radix-ui/react-dialog";
 import { AnimatePresence } from "motion/react";
 
@@ -17,7 +17,7 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 
 // src/v2/components/ModalContent.tsx
-import * as React2 from "react";
+import * as React from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { motion } from "motion/react";
 import styled from "styled-components";
@@ -33,7 +33,6 @@ var MODAL_SIZE_PRESETS = {
   large: "800px",
   full: "90vw"
 };
-var MOBILE_BREAKPOINT = "780px";
 var RAIL_BUTTON_SIZE = 44;
 var RAIL_OFFSET = 12;
 var RAIL_GAP = 12;
@@ -48,17 +47,11 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 
 // src/v2/MotionConfig.ts
-import * as React from "react";
-var DURATION_MOBILE = 0.6;
 var DURATION_DESKTOP = 0.3;
 var desktopTransition = {
   duration: DURATION_DESKTOP,
   ease: "easeInOut"
 };
-var mobileTransition = {
-  duration: DURATION_MOBILE,
-  ease: "easeInOut"
-};
 var desktopModalVariants = {
   initial: {
     opacity: 0,
@@ -96,40 +89,6 @@ var desktopOverlayVariants = {
     transition: desktopTransition
   }
 };
-var mobileDrawerVariants = {
-  initial: {
-    opacity: 0,
-    x: "-50%",
-    y: "100%",
-    transition: mobileTransition
-  },
-  animate: {
-    opacity: 1,
-    x: "-50%",
-    y: 0,
-    transition: mobileTransition
-  },
-  exit: {
-    opacity: 0,
-    x: "-50%",
-    y: "100%",
-    transition: mobileTransition
-  }
-};
-var mobileOverlayVariants = {
-  initial: {
-    opacity: 0,
-    transition: mobileTransition
-  },
-  animate: {
-    opacity: 1,
-    transition: mobileTransition
-  },
-  exit: {
-    opacity: 0,
-    transition: mobileTransition
-  }
-};
 var draggableModalVariants = {
   initial: {
     opacity: 0,
@@ -144,42 +103,19 @@ var draggableModalVariants = {
     transition: desktopTransition
   }
 };
-function getContentVariants(isMobile, isDraggable) {
-  if (isDraggable) {
-    return draggableModalVariants;
-  }
-  return isMobile ? mobileDrawerVariants : desktopModalVariants;
+function getContentVariants(isDraggable) {
+  return isDraggable ? draggableModalVariants : desktopModalVariants;
 }
-function getOverlayVariants(isMobile) {
-  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;
-}
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;
-  });
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);
-    const handler = (e) => setIsMobile(e.matches);
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handler);
-      return () => mediaQuery.removeEventListener("change", handler);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handler);
-      return () => mediaQuery.removeListener(handler);
-    }
-  }, []);
-  return isMobile;
+function getOverlayVariants() {
+  return desktopOverlayVariants;
 }
 
 // src/v2/components/ModalContent.tsx
 import { jsx } from "react/jsx-runtime";
 var StyledMotionWrapper = styled(motion.div)`
   position: fixed;
-  top: ${(props) => props.$isMobile ? "auto" : "50%"};
+  top: 50%;
   left: 50%;
-  bottom: ${(props) => props.$isMobile ? 0 : "auto"};
   z-index: ${(props) => props.$zIndex ? props.$zIndex + 1 : 7};
 `;
 var StyledContent = styled.div.withConfig({
@@ -194,33 +130,10 @@ var StyledContent = styled.div.withConfig({
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
   width: ${DEFAULT_MODAL_WIDTH};
-  max-width: ${(props) => {
-  return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;
-}};
+  /* Account for rail space on the side; shrinks to fit small viewports */
+  max-width: calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px);
   max-height: calc(100vh - ${BODY_PADDING});
 
-  /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    /* Full viewport width - edge to edge */
-    width: 100vw;
-    max-width: 100vw;
-    min-width: 100vw;
-
-    /* Height hugs content, with increased max-height to get closer to top */
-    /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */
-    height: auto;
-    max-height: calc(95vh - 84px);
-
-    /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */
-    border-top-left-radius: ${(props) => props.theme.radii[800]};
-    border-top-right-radius: ${(props) => props.theme.radii[800]};
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    /* Mobile shadow - appears to cast upward (high-reverse) */
-    box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);
-  }
-
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     height: calc(100vh - ${BODY_PADDING});
   }
@@ -231,9 +144,9 @@ var StyledContent = styled.div.withConfig({
   ${LAYOUT}
 `;
 StyledContent.displayName = "ModalContent";
-var DragContext = React2.createContext(null);
+var DragContext = React.createContext(null);
 var useDragContext = () => {
-  const context = React2.useContext(DragContext);
+  const context = React.useContext(DragContext);
   return context;
 };
 var StaticModalContent = ({
@@ -244,12 +157,10 @@ var StaticModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const isMobile = useIsMobile();
-  const contentVariants = getContentVariants(isMobile, false);
+  const contentVariants = getContentVariants(false);
   return /* @__PURE__ */ jsx(DragContext.Provider, { value: null, children: /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, "aria-label": label, ...dialogContentProps, children: /* @__PURE__ */ jsx(
     StyledMotionWrapper,
     {
-      $isMobile: isMobile,
       $zIndex: zIndex,
       variants: contentVariants,
       initial: "initial",
@@ -276,11 +187,10 @@ var DraggableModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const [position, setPosition] = React2.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const contentRef = React2.useRef(null);
-  const isMobile = useIsMobile();
-  const handleHeaderMouseDown = React2.useCallback((e) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const contentRef = React.useRef(null);
+  const handleHeaderMouseDown = React.useCallback((e) => {
     const target = e.target;
     if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.closest("button")) {
       return;
@@ -295,18 +205,12 @@ var DraggableModalContent = ({
       e2.preventDefault();
       const newX = e2.clientX - offsetX;
       const newY = e2.clientY - offsetY;
-      const isRailOnSide = window.innerWidth > 780;
       const modalWidth = rect.width;
       const modalHeight = rect.height;
-      let maxX = window.innerWidth - modalWidth;
-      let minX = 0;
-      let maxY = window.innerHeight - modalHeight;
-      let minY = 0;
-      if (isRailOnSide) {
-        maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
-      } else {
-        minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;
-      }
+      const minX = 0;
+      const maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
+      const minY = 0;
+      const maxY = window.innerHeight - modalHeight;
       const constrainedX = Math.max(minX, Math.min(maxX, newX));
       const constrainedY = Math.max(minY, Math.min(maxY, newY));
       const centerX = window.innerWidth / 2 - modalWidth / 2;
@@ -324,7 +228,7 @@ var DraggableModalContent = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, []);
-  const dragContextValue = React2.useMemo(
+  const dragContextValue = React.useMemo(
     () => ({
       position,
       isDragging,
@@ -334,10 +238,10 @@ var DraggableModalContent = ({
     }),
     [position, isDragging, handleHeaderMouseDown]
   );
-  const handleInteractOutside = React2.useCallback((e) => {
+  const handleInteractOutside = React.useCallback((e) => {
     e.preventDefault();
   }, []);
-  const contentVariants = getContentVariants(isMobile, true);
+  const contentVariants = getContentVariants(true);
   return /* @__PURE__ */ jsx(DragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ jsx(
     Dialog.Content,
     {
@@ -348,7 +252,6 @@ var DraggableModalContent = ({
       children: /* @__PURE__ */ jsx(
         StyledMotionWrapper,
         {
-          $isMobile: isMobile,
           $zIndex: zIndex,
           variants: contentVariants,
           initial: "initial",
@@ -444,7 +347,7 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 
 // src/v2/components/ModalCloseWrapper.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import * as Dialog3 from "@radix-ui/react-dialog";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ModalCloseWrapper = (props) => {
@@ -452,7 +355,7 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ jsx3(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React4.isValidElement(children) ? React4.cloneElement(children, {
+  return /* @__PURE__ */ jsx3(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React3.isValidElement(children) ? React3.cloneElement(children, {
     "data-slot": "modal-close-wrapper",
     "data-qa-modal-close-wrapper": "",
     ...children.props || {}
@@ -474,12 +377,6 @@ var ModalCustomFooter = styled3(Box2)`
   justify-content: flex-end;
   gap: ${(props) => props.theme.space[100]};
 
-  /* Flat bottom corners to blend with device edge on mobile */
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
   ${COMMON3}
   ${FLEXBOX3}
   ${BORDER3}
@@ -509,7 +406,7 @@ var ModalFooter = (props) => {
 ModalFooter.displayName = "ModalFooter";
 
 // src/v2/components/ModalBody.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import styled4 from "styled-components";
 import Box3 from "@sproutsocial/seeds-react-box";
 import {
@@ -536,7 +433,7 @@ var StyledModalBody = styled4(Box3)`
   ${LAYOUT4}
 `;
 StyledModalBody.displayName = "ModalBody";
-var ModalBody = React6.forwardRef(
+var ModalBody = React5.forwardRef(
   ({ children, ...rest }, ref) => {
     return /* @__PURE__ */ jsx5(
       StyledModalBody,
@@ -553,11 +450,11 @@ var ModalBody = React6.forwardRef(
 ModalBody.displayName = "ModalBody";
 
 // src/v2/components/ModalDescription.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import * as Dialog4 from "@radix-ui/react-dialog";
 import Box4 from "@sproutsocial/seeds-react-box";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var ModalDescription = React7.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
+var ModalDescription = React6.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
   return /* @__PURE__ */ jsx6(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ jsx6(
     Box4,
     {
@@ -583,16 +480,6 @@ var Rail = styled5.div`
   flex-direction: column;
   gap: ${RAIL_GAP}px;
   z-index: 1;
-
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    /* Move rail above the modal on the right side */
-    top: auto;
-    bottom: calc(100% + ${RAIL_OFFSET}px);
-    right: ${RAIL_OFFSET}px;
-    left: auto;
-    /* Change to horizontal layout with reversed order */
-    flex-direction: row-reverse;
-  }
 `;
 var ModalRail = ({ children }) => {
   return /* @__PURE__ */ jsx7(
@@ -734,11 +621,11 @@ var ModalAction = ({
 ModalAction.displayName = "ModalAction";
 
 // src/v2/components/ModalExternalTrigger.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var ModalExternalTrigger = React10.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
-  const handleClick = React10.useCallback(
+var ModalExternalTrigger = React9.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
+  const handleClick = React9.useCallback(
     (e) => {
       onClick?.(e);
       if (!e.defaultPrevented) {
@@ -830,15 +717,15 @@ var Modal = (props) => {
     disableEscapeKeyClose = false,
     ...rest
   } = props;
-  const [isOpen, setIsOpen] = React12.useState(defaultOpen ?? false);
-  const handleOpenChange = React12.useCallback(
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen ?? false);
+  const handleOpenChange = React11.useCallback(
     (newOpen) => {
       setIsOpen(newOpen);
       onOpenChange?.(newOpen);
     },
     [onOpenChange]
   );
-  const dataAttributes = React12.useMemo(() => {
+  const dataAttributes = React11.useMemo(() => {
     const attrs = {};
     Object.entries(data).forEach(([key, value]) => {
       attrs[`data-${key}`] = String(value);
@@ -850,10 +737,9 @@ var Modal = (props) => {
     return attrs;
   }, [data, open]);
   const shouldRenderHeader = Boolean(title || subtitle);
-  const isMobile = useIsMobile();
-  const overlayVariants = getOverlayVariants(isMobile);
+  const overlayVariants = getOverlayVariants();
   const ModalContentComponent = draggable ? DraggableModalContent : StaticModalContent;
-  const wrappedOnInteractOutside = React12.useCallback(
+  const wrappedOnInteractOutside = React11.useCallback(
     (e) => {
       if (disableOutsideClickClose) {
         e.preventDefault();
@@ -862,12 +748,16 @@ var Modal = (props) => {
     },
     [disableOutsideClickClose, onInteractOutside]
   );
-  const wrappedOnEscapeKeyDown = React12.useCallback(
+  const wrappedOnEscapeKeyDown = React11.useCallback(
     (e) => {
       const hasOpenPopout = document.querySelector("[data-qa-popout]") !== null;
       if (hasOpenPopout) {
         e.preventDefault();
       }
+      const hasOpenBaseUIPopup = document.querySelector("[role='dialog'] [data-open]") !== null;
+      if (hasOpenBaseUIPopup) {
+        e.preventDefault();
+      }
       if (disableEscapeKeyClose) {
         e.preventDefault();
       }
@@ -945,7 +835,7 @@ var Modal = (props) => {
   );
 };
 function useModalTriggerProps(isOpen, modalId) {
-  return React12.useMemo(
+  return React11.useMemo(
     () => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -955,8 +845,8 @@ function useModalTriggerProps(isOpen, modalId) {
   );
 }
 function useModalExternalTrigger(modalId) {
-  const triggerRef = React12.useRef(null);
-  const triggerProps = React12.useCallback(
+  const triggerRef = React11.useRef(null);
+  const triggerProps = React11.useCallback(
     (isOpen) => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -964,7 +854,7 @@ function useModalExternalTrigger(modalId) {
     }),
     [modalId]
   );
-  const onCloseAutoFocus = React12.useCallback((e) => {
+  const onCloseAutoFocus = React11.useCallback((e) => {
     e.preventDefault();
     triggerRef.current?.focus();
   }, []);
@@ -991,4 +881,4 @@ export {
   useModalExternalTrigger,
   Modal_default
 };
-//# sourceMappingURL=chunk-XQ2A6HDC.js.map
+//# sourceMappingURL=chunk-KZ6XTIWT.js.map