@sproutsocial/seeds-react-modal 2.2.4 → 2.3.0

package/src/v2/Modal.tsx

@@ -14,6 +14,14 @@ import {
 import type { TypeModalProps } from "./ModalTypes";
 import { getOverlayVariants, useIsMobile } from "./MotionConfig";
 
+// Type aliases for Dialog.Content event handlers
+type InteractOutsideHandler = NonNullable<
+  React.ComponentPropsWithoutRef<typeof Dialog.Content>["onInteractOutside"]
+>;
+type EscapeKeyDownHandler = NonNullable<
+  React.ComponentPropsWithoutRef<typeof Dialog.Content>["onEscapeKeyDown"]
+>;
+
 /**
  * Accessible modal dialog component built on Radix UI Dialog primitives.
  *
@@ -61,6 +69,16 @@ const Modal = (props: TypeModalProps) => {
     closeButtonAriaLabel = "Close",
     closeButtonProps,
     zIndex = 6,
+    // Extract Dialog.Content event handlers
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    // Extract convenience boolean props
+    disableOutsideClickClose = false,
+    disableEscapeKeyClose = false,
     ...rest
   } = props;
 
@@ -104,6 +122,27 @@ const Modal = (props: TypeModalProps) => {
     ? DraggableModalContent
     : StaticModalContent;
 
+  // Wrap event handlers to support convenience boolean props
+  const wrappedOnInteractOutside = React.useCallback<InteractOutsideHandler>(
+    (e) => {
+      if (disableOutsideClickClose) {
+        e.preventDefault();
+      }
+      onInteractOutside?.(e);
+    },
+    [disableOutsideClickClose, onInteractOutside]
+  );
+
+  const wrappedOnEscapeKeyDown = React.useCallback<EscapeKeyDownHandler>(
+    (e) => {
+      if (disableEscapeKeyClose) {
+        e.preventDefault();
+      }
+      onEscapeKeyDown?.(e);
+    },
+    [disableEscapeKeyClose, onEscapeKeyDown]
+  );
+
   return (
     <Dialog.Root
       open={open}
@@ -130,6 +169,7 @@ const Modal = (props: TypeModalProps) => {
                     <StyledOverlay
                       data-slot="modal-overlay"
                       data-qa-modal-overlay
+                      data-testid="modal-overlay"
                       allowInteraction={draggable}
                     />
                   </StyledMotionOverlay>
@@ -141,6 +181,14 @@ const Modal = (props: TypeModalProps) => {
                 draggable={draggable}
                 zIndex={zIndex}
                 rest={rest}
+                dialogContentProps={{
+                  onOpenAutoFocus,
+                  onCloseAutoFocus,
+                  onEscapeKeyDown: wrappedOnEscapeKeyDown,
+                  onPointerDownOutside,
+                  onFocusOutside,
+                  onInteractOutside: wrappedOnInteractOutside,
+                }}
               >
                 {/* Floating actions rail - always show a close by default */}
                 <ModalRail>

package/src/v2/ModalTypes.ts

@@ -145,6 +145,29 @@ export type TypeModalActionProps =
 // MODAL PROPS - Main Modal component types
 // =============================================================================
 
+/**
+ * Event handler props from Radix UI Dialog.Content.
+ * These control modal interaction behavior like closing on outside clicks or escape key.
+ */
+type DialogContentEventHandlers = Pick<
+  React.ComponentPropsWithoutRef<typeof Dialog.Content>,
+  | "onOpenAutoFocus"
+  | "onCloseAutoFocus"
+  | "onEscapeKeyDown"
+  | "onPointerDownOutside"
+  | "onFocusOutside"
+  | "onInteractOutside"
+>;
+
+/**
+ * Dialog.Content event handlers excluding onInteractOutside.
+ * Used for draggable modals where onInteractOutside conflicts with the draggable UX.
+ */
+type DialogContentEventHandlersWithoutInteractOutside = Omit<
+  DialogContentEventHandlers,
+  "onInteractOutside"
+>;
+
 /**
  * Base common props shared by all modal variants (without close button props).
  */
@@ -182,6 +205,18 @@ type TypeModalCommonPropsBase = TypeContainerProps &
 
     /** Controls the z-index CSS property (defaults to 6 to match Modal v1) */
     zIndex?: number;
+
+    /**
+     * Prevents the modal from closing when clicking outside.
+     * The onInteractOutside handler will still be called if provided.
+     */
+    disableOutsideClickClose?: boolean;
+
+    /**
+     * Prevents the modal from closing when pressing the Escape key.
+     * The onEscapeKeyDown handler will still be called if provided.
+     */
+    disableEscapeKeyClose?: boolean;
   };
 
 /**
@@ -244,18 +279,30 @@ type TypeModalCommonProps =
 /**
  * Base props with draggable and showOverlay relationship enforced.
  *
- * When draggable is true, showOverlay must be false because the overlay
- * would block interaction with content behind the modal.
+ * When draggable is true:
+ * - showOverlay must be false (overlay would block interaction with content behind the modal)
+ * - onInteractOutside is not allowed (conflicts with draggable UX which needs to keep modal open)
+ * - disableOutsideClickClose is not allowed (since onInteractOutside is not supported)
+ *
+ * When draggable is false (or undefined):
+ * - All Dialog.Content event handlers are available including onInteractOutside
+ * - disableOutsideClickClose can be used
  */
 type TypeModalBaseProps =
-  | (TypeModalCommonProps & {
-      draggable: true;
-      showOverlay?: false;
-    })
-  | (TypeModalCommonProps & {
-      draggable?: false;
-      showOverlay?: boolean;
-    });
+  | (TypeModalCommonProps &
+      DialogContentEventHandlersWithoutInteractOutside & {
+        draggable: true;
+        showOverlay?: false;
+        /** onInteractOutside is not supported for draggable modals */
+        onInteractOutside?: never;
+        /** disableOutsideClickClose is not supported for draggable modals */
+        disableOutsideClickClose?: never;
+      })
+  | (TypeModalCommonProps &
+      DialogContentEventHandlers & {
+        draggable?: false;
+        showOverlay?: boolean;
+      });
 
 /**
  * Modal props with title provided.

package/src/v2/components/ModalContent.tsx

@@ -119,6 +119,15 @@ interface ModalContentProps {
   draggable?: boolean;
   zIndex?: number;
   rest: any;
+  dialogContentProps?: Pick<
+    React.ComponentPropsWithoutRef<typeof Dialog.Content>,
+    | "onOpenAutoFocus"
+    | "onCloseAutoFocus"
+    | "onEscapeKeyDown"
+    | "onPointerDownOutside"
+    | "onFocusOutside"
+    | "onInteractOutside"
+  >;
 }
 
 /**
@@ -131,13 +140,14 @@ export const StaticModalContent: React.FC<ModalContentProps> = ({
   dataAttributes,
   zIndex,
   rest,
+  dialogContentProps,
 }) => {
   const isMobile = useIsMobile();
   const contentVariants = getContentVariants(isMobile, false);
 
   return (
     <DragContext.Provider value={null}>
-      <Dialog.Content asChild aria-label={label}>
+      <Dialog.Content asChild aria-label={label} {...dialogContentProps}>
         <StyledMotionWrapper
           $isMobile={isMobile}
           $zIndex={zIndex}
@@ -170,6 +180,7 @@ export const DraggableModalContent: React.FC<ModalContentProps> = ({
   dataAttributes,
   zIndex,
   rest,
+  dialogContentProps,
 }) => {
   const [position, setPosition] = React.useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = React.useState(false);
@@ -274,6 +285,7 @@ export const DraggableModalContent: React.FC<ModalContentProps> = ({
       <Dialog.Content
         asChild
         aria-label={label}
+        {...dialogContentProps}
         onInteractOutside={handleInteractOutside}
       >
         <StyledMotionWrapper

package/dist/esm/chunk-UP2XQN57.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/v2/Modal.tsx","../../src/v2/components/ModalHeader.tsx","../../src/v2/components/ModalContent.tsx","../../src/shared/constants.ts","../../src/v2/MotionConfig.ts","../../src/v2/components/ModalFooter.tsx","../../src/v2/components/ModalCloseWrapper.tsx","../../src/v2/components/ModalBody.tsx","../../src/v2/components/ModalDescription.tsx","../../src/v2/components/ModalRail.tsx","../../src/v2/components/ModalAction.tsx","../../../seeds-react-mixins/src/index.ts","../../src/v2/components/ModalOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { AnimatePresence } from \"motion/react\";\nimport {\n  StyledOverlay,\n  StyledMotionOverlay,\n  DraggableModalContent,\n  StaticModalContent,\n  ModalHeader,\n  ModalDescription,\n  ModalRail,\n  ModalAction,\n} from \"./components\";\nimport type { TypeModalProps } from \"./ModalTypes\";\nimport { getOverlayVariants, useIsMobile } from \"./MotionConfig\";\n\n/**\n * Accessible modal dialog component built on Radix UI Dialog primitives.\n *\n * This component provides a flexible modal implementation with comprehensive accessibility\n * features, keyboard navigation, and focus management built in.\n *\n * Key capabilities:\n * - Automatic ARIA attributes and focus trapping\n * - ESC key and outside click to close\n * - Simplified API with title/subtitle props for common use cases\n * - Controlled and uncontrolled state modes\n * - Optional draggable behavior for side-by-side interaction\n * - Floating action rail for quick actions like close, expand, etc.\n * - Responsive bottom sheet layout on mobile\n *\n * @example\n * // Simple uncontrolled modal\n * <Modal\n *   title=\"Delete Item\"\n *   subtitle=\"This action cannot be undone\"\n *   modalTrigger={<Button>Delete</Button>}\n * >\n *   <ModalBody>Are you sure you want to delete this item?</ModalBody>\n *   <ModalFooter\n *     cancelButton={<Button>Cancel</Button>}\n *     primaryButton={<Button appearance=\"destructive\">Delete</Button>}\n *   />\n * </Modal>\n */\nconst Modal = (props: TypeModalProps) => {\n  const {\n    children,\n    modalTrigger,\n    draggable = false,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"aria-label\": label,\n    title,\n    subtitle,\n    description,\n    data = {},\n    showOverlay = true,\n    actions,\n    closeButtonAriaLabel = \"Close\",\n    closeButtonProps,\n    zIndex = 6,\n    ...rest\n  } = props;\n\n  // Track open state for AnimatePresence\n  // This state is synced via onOpenChange regardless of controlled/uncontrolled mode\n  const [isOpen, setIsOpen] = React.useState(defaultOpen ?? false);\n\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      // Always sync state for AnimatePresence\n      setIsOpen(newOpen);\n      // Call user's callback\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  // Create data attributes object\n  const dataAttributes = React.useMemo(() => {\n    const attrs: Record<string, string> = {};\n    Object.entries(data).forEach(([key, value]) => {\n      attrs[`data-${key}`] = String(value);\n    });\n    attrs[\"data-qa-modal\"] = \"\";\n    // Only add open attribute if in controlled mode\n    if (open !== undefined) {\n      attrs[\"data-qa-modal-open\"] = String(open);\n    }\n    return attrs;\n  }, [data, open]);\n\n  // Determine if we should auto-render the header from provided props\n  const shouldRenderHeader = Boolean(title || subtitle);\n\n  // Get mobile state and appropriate overlay variants\n  const isMobile = useIsMobile();\n  const overlayVariants = getOverlayVariants(isMobile);\n\n  // Choose the appropriate content component based on draggable prop\n  const ModalContentComponent = draggable\n    ? DraggableModalContent\n    : StaticModalContent;\n\n  return (\n    <Dialog.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={handleOpenChange}\n      modal={!draggable}\n    >\n      {/* Render trigger button if provided */}\n      {modalTrigger && <Dialog.Trigger asChild>{modalTrigger}</Dialog.Trigger>}\n\n      <Dialog.Portal forceMount>\n        <AnimatePresence mode=\"wait\">\n          {(open ?? isOpen) && (\n            <>\n              {showOverlay && (\n                <Dialog.Overlay asChild>\n                  <StyledMotionOverlay\n                    $zIndex={zIndex}\n                    variants={overlayVariants}\n                    initial=\"initial\"\n                    animate=\"animate\"\n                    exit=\"exit\"\n                  >\n                    <StyledOverlay\n                      data-slot=\"modal-overlay\"\n                      data-qa-modal-overlay\n                      allowInteraction={draggable}\n                    />\n                  </StyledMotionOverlay>\n                </Dialog.Overlay>\n              )}\n              <ModalContentComponent\n                label={label}\n                dataAttributes={dataAttributes}\n                draggable={draggable}\n                zIndex={zIndex}\n                rest={rest}\n              >\n                {/* Floating actions rail - always show a close by default */}\n                <ModalRail>\n                  <ModalAction\n                    actionType=\"close\"\n                    iconName=\"x-outline\"\n                    {...closeButtonProps}\n                    aria-label={\n                      (closeButtonProps as any)?.[\"aria-label\"] ??\n                      closeButtonAriaLabel\n                    }\n                  />\n                  {actions?.map((action, idx) => (\n                    <ModalAction key={idx} {...action} />\n                  ))}\n                </ModalRail>\n                {/* Auto-render header when title or subtitle is provided */}\n                {shouldRenderHeader && (\n                  <ModalHeader title={title} subtitle={subtitle} />\n                )}\n\n                {/* Auto-render description when provided */}\n                {description && (\n                  <ModalDescription>{description}</ModalDescription>\n                )}\n\n                {/* Main content */}\n                {children}\n              </ModalContentComponent>\n            </>\n          )}\n        </AnimatePresence>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default Modal;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport {\n  COMMON,\n  FLEXBOX,\n  BORDER,\n  LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalHeaderProps } from \"../ModalTypes\";\nimport { useDragContext } from \"./ModalContent\";\n\ninterface HeaderProps {\n  draggable?: boolean;\n  isDragging?: boolean;\n}\n\n/**\n * Base styled header component for custom modal headers.\n *\n * Use this component when you need complete control over the header layout\n * and don't want to use the slot-based ModalHeader component.\n *\n * @example\n * <ModalCustomHeader>\n *   <YourCustomHeaderContent />\n * </ModalCustomHeader>\n */\nexport const ModalCustomHeader = styled(Box).withConfig({\n  shouldForwardProp: (prop) => ![\"draggable\", \"isDragging\"].includes(prop),\n})<HeaderProps>`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n\n  /* Draggable cursor styling */\n  ${(props) =>\n    props.draggable &&\n    `\n    cursor: ${props.isDragging ? \"grabbing\" : \"grab\"};\n    user-select: none;\n  `}\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${BORDER}\n  ${LAYOUT}\n`;\n\nModalCustomHeader.displayName = \"ModalCustomHeader\";\n\n/**\n * Modal header component with title and subtitle slots.\n *\n * This component only supports slot-based rendering via title and subtitle props.\n * For custom header layouts, use ModalCustomHeader instead.\n *\n * @example\n * <ModalHeader title=\"Delete Item\" subtitle=\"This action cannot be undone\" />\n */\nexport const ModalHeader = (props: TypeModalHeaderProps) => {\n  const {\n    title,\n    subtitle,\n    titleProps = {},\n    subtitleProps = {},\n    ...rest\n  } = props;\n\n  const dragContext = useDragContext();\n  const isDraggable = dragContext?.draggable ?? false;\n\n  return (\n    <ModalCustomHeader\n      data-slot=\"modal-header\"\n      data-qa-modal-header\n      {...rest}\n      onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}\n      draggable={isDraggable}\n      isDragging={dragContext?.isDragging}\n    >\n      <Box>\n        {title && (\n          <Dialog.Title asChild {...titleProps}>\n            <Text.Headline>{title}</Text.Headline>\n          </Dialog.Title>\n        )}\n        {subtitle && (\n          <Dialog.Description asChild {...subtitleProps}>\n            <Text as=\"div\" fontSize={200}>\n              {subtitle}\n            </Text>\n          </Dialog.Description>\n        )}\n      </Box>\n    </ModalCustomHeader>\n  );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { motion } from \"motion/react\";\nimport styled from \"styled-components\";\nimport {\n  BODY_PADDING,\n  DEFAULT_MODAL_WIDTH,\n  MOBILE_BREAKPOINT,\n  RAIL_EXTRA_SPACE,\n  RAIL_BUTTON_SIZE,\n  RAIL_OFFSET,\n} from \"../../shared/constants\";\nimport {\n  COMMON,\n  FLEXBOX,\n  BORDER,\n  LAYOUT,\n  type TypeSystemCommonProps,\n  type TypeSystemBorderProps,\n  type TypeSystemLayoutProps,\n  type TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { getContentVariants, useIsMobile } from \"../MotionConfig\";\n\ninterface StyledContentProps\n  extends TypeSystemCommonProps,\n    TypeSystemFlexboxProps,\n    TypeSystemBorderProps,\n    TypeSystemLayoutProps {\n  isDragging?: boolean;\n  draggable?: boolean;\n}\n\n// Styled motion.div wrapper that handles positioning\nconst StyledMotionWrapper = styled(motion.div)<{\n  $isMobile: boolean;\n  $zIndex?: number;\n}>`\n  position: fixed;\n  top: ${(props) => (props.$isMobile ? \"auto\" : \"50%\")};\n  left: 50%;\n  bottom: ${(props) => (props.$isMobile ? 0 : \"auto\")};\n  z-index: ${(props) => (props.$zIndex ? props.$zIndex + 1 : 7)};\n`;\n\nexport const StyledContent = styled.div.withConfig({\n  shouldForwardProp: (prop) => ![\"isDragging\", \"draggable\"].includes(prop),\n})<StyledContentProps>`\n  display: flex;\n  flex-direction: column;\n  border-radius: ${(props) => props.theme.radii[800]};\n  box-shadow: ${(props) => props.theme.shadows.high};\n  filter: blur(0);\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  color: ${(props) => props.theme.colors.text.body};\n  outline: none;\n  width: ${DEFAULT_MODAL_WIDTH};\n  max-width: ${(props) => {\n    // Account for rail space when positioned on the side (viewport > ${MOBILE_BREAKPOINT})\n    // At viewport <= ${MOBILE_BREAKPOINT}, rail is above modal, so no horizontal space needed\n    return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;\n  }};\n  max-height: calc(100vh - ${BODY_PADDING});\n\n  /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */\n  @media (max-width: ${MOBILE_BREAKPOINT}) {\n    /* Full viewport width - edge to edge */\n    width: 100vw;\n    max-width: 100vw;\n    min-width: 100vw;\n\n    /* Height hugs content, with increased max-height to get closer to top */\n    /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */\n    height: auto;\n    max-height: calc(95vh - 84px);\n\n    /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */\n    border-top-left-radius: ${(props) => props.theme.radii[800]};\n    border-top-right-radius: ${(props) => props.theme.radii[800]};\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n\n    /* Mobile shadow - appears to cast upward (high-reverse) */\n    box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);\n  }\n\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: calc(100vh - ${BODY_PADDING});\n  }\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${BORDER}\n  ${LAYOUT}\n`;\n\nStyledContent.displayName = \"ModalContent\";\n\n// Context to share drag state between modal content and header\ninterface DragContextValue {\n  position: { x: number; y: number };\n  isDragging: boolean;\n  onHeaderMouseDown: (e: React.MouseEvent) => void;\n  contentRef: React.RefObject<HTMLDivElement>;\n  draggable: boolean;\n}\n\nexport const DragContext = React.createContext<DragContextValue | null>(null);\n\nexport const useDragContext = () => {\n  const context = React.useContext(DragContext);\n  return context;\n};\n\ninterface ModalContentProps {\n  children: React.ReactNode;\n  label?: string;\n  dataAttributes: Record<string, string>;\n  draggable?: boolean;\n  zIndex?: number;\n  rest: any;\n}\n\n/**\n * Static modal content component for non-draggable modals.\n * This is a lightweight version that doesn't include any drag logic.\n */\nexport const StaticModalContent: React.FC<ModalContentProps> = ({\n  children,\n  label,\n  dataAttributes,\n  zIndex,\n  rest,\n}) => {\n  const isMobile = useIsMobile();\n  const contentVariants = getContentVariants(isMobile, false);\n\n  return (\n    <DragContext.Provider value={null}>\n      <Dialog.Content asChild aria-label={label}>\n        <StyledMotionWrapper\n          $isMobile={isMobile}\n          $zIndex={zIndex}\n          variants={contentVariants}\n          initial=\"initial\"\n          animate=\"animate\"\n          exit=\"exit\"\n        >\n          <StyledContent\n            data-slot=\"modal-content\"\n            draggable={false}\n            {...dataAttributes}\n            {...rest}\n          >\n            {children}\n          </StyledContent>\n        </StyledMotionWrapper>\n      </Dialog.Content>\n    </DragContext.Provider>\n  );\n};\n\n/**\n * Draggable modal content component with full drag-and-drop functionality.\n * Only rendered when draggable={true} to avoid unnecessary overhead.\n */\nexport const DraggableModalContent: React.FC<ModalContentProps> = ({\n  children,\n  label,\n  dataAttributes,\n  zIndex,\n  rest,\n}) => {\n  const [position, setPosition] = React.useState({ x: 0, y: 0 });\n  const [isDragging, setIsDragging] = React.useState(false);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const isMobile = useIsMobile();\n\n  const handleHeaderMouseDown = React.useCallback((e: React.MouseEvent) => {\n    // Only allow dragging from header (not interactive elements)\n    const target = e.target as HTMLElement;\n    if (\n      target.tagName === \"BUTTON\" ||\n      target.tagName === \"INPUT\" ||\n      target.closest(\"button\")\n    ) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragging(true);\n\n    const rect = contentRef.current?.getBoundingClientRect();\n    if (!rect) return;\n\n    // Calculate offset from mouse to current modal position\n    const offsetX = e.clientX - rect.left;\n    const offsetY = e.clientY - rect.top;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      e.preventDefault();\n\n      // Calculate new position based on mouse position minus offset\n      const newX = e.clientX - offsetX;\n      const newY = e.clientY - offsetY;\n\n      // Determine if rail is on the side (viewport > 780px) or above (viewport <= 780px)\n      const isRailOnSide = window.innerWidth > 780;\n\n      // Constrain to viewport bounds (keeping modal AND rail fully visible)\n      const modalWidth = rect.width;\n      const modalHeight = rect.height;\n\n      // Adjust boundaries to account for rail position\n      let maxX = window.innerWidth - modalWidth;\n      let minX = 0;\n      let maxY = window.innerHeight - modalHeight;\n      let minY = 0;\n\n      if (isRailOnSide) {\n        // Rail is positioned on the right side of the modal\n        // Reduce maxX to prevent rail from going off-screen\n        maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;\n      } else {\n        // Rail is positioned above the modal (viewport <= 780px)\n        // Account for rail height + offset at the top\n        minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;\n      }\n\n      const constrainedX = Math.max(minX, Math.min(maxX, newX));\n      const constrainedY = Math.max(minY, Math.min(maxY, newY));\n\n      // Convert to offset from center for our transform\n      const centerX = window.innerWidth / 2 - modalWidth / 2;\n      const centerY = window.innerHeight / 2 - modalHeight / 2;\n\n      setPosition({\n        x: constrainedX - centerX,\n        y: constrainedY - centerY,\n      });\n    };\n\n    const handleMouseUp = () => {\n      setIsDragging(false);\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    document.addEventListener(\"mouseup\", handleMouseUp);\n  }, []);\n\n  const dragContextValue = React.useMemo<DragContextValue>(\n    () => ({\n      position,\n      isDragging,\n      onHeaderMouseDown: handleHeaderMouseDown,\n      contentRef,\n      draggable: true,\n    }),\n    [position, isDragging, handleHeaderMouseDown]\n  );\n\n  // Prevent modal from closing on outside interaction when draggable\n  const handleInteractOutside = React.useCallback((e: Event) => {\n    e.preventDefault();\n  }, []);\n\n  // Get appropriate animation variants based on context\n  const contentVariants = getContentVariants(isMobile, true);\n\n  return (\n    <DragContext.Provider value={dragContextValue}>\n      <Dialog.Content\n        asChild\n        aria-label={label}\n        onInteractOutside={handleInteractOutside}\n      >\n        <StyledMotionWrapper\n          $isMobile={isMobile}\n          $zIndex={zIndex}\n          variants={contentVariants}\n          initial=\"initial\"\n          animate=\"animate\"\n          exit=\"exit\"\n          style={{\n            // Apply drag offset transforms\n            // For draggable modals, variants only handle opacity, so we apply transforms here\n            // Combined with top: 50%, left: 50%, these create the centering + drag offset\n            x: `calc(-50% + ${position.x}px)`,\n            y: `calc(-50% + ${position.y}px)`,\n          }}\n        >\n          <StyledContent\n            data-slot=\"modal-content\"\n            ref={contentRef}\n            draggable={true}\n            isDragging={isDragging}\n            {...dataAttributes}\n            {...rest}\n          >\n            {children}\n          </StyledContent>\n        </StyledMotionWrapper>\n      </Dialog.Content>\n    </DragContext.Provider>\n  );\n};\n","// Shared constants for both Modal versions\n\n// Default z-index values (v1 only - v2 relies on portal stacking order)\nexport const DEFAULT_MODAL_Z_INDEX = 6;\nexport const DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;\n\n// Default styling values\nexport const DEFAULT_MODAL_WIDTH = \"600px\";\nexport const DEFAULT_MODAL_BG = \"container.background.base\";\nexport const DEFAULT_CLOSE_BUTTON_LABEL = \"Close dialog\";\n\n// Max space allowed between the modal and the edge of the browser\n// Note: 64px doesn't have a direct space token match (space[500] = 32px, space[600] = 40px)\n// Keeping as hardcoded value for now as it's a specific layout constraint\nexport const BODY_PADDING = \"64px\";\n\n// Size presets for simplified API\nexport const MODAL_SIZE_PRESETS = {\n  small: \"400px\",\n  medium: \"600px\",\n  large: \"800px\",\n  full: \"90vw\",\n} as const;\n\n// Mobile breakpoint for bottom sheet layout\nexport const MOBILE_BREAKPOINT = \"780px\";\n\n// Rail button constants\nexport const RAIL_BUTTON_SIZE = 44; // px\nexport const RAIL_OFFSET = 12; // px from card edge\nexport const RAIL_GAP = 12; // px between buttons\nexport const RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET; // 56px\n","import type { Variants } from \"motion/react\";\nimport { MOBILE_BREAKPOINT } from \"../shared/constants\";\n\nconst DURATION_MOBILE: number = 0.6;\nconst DURATION_DESKTOP: number = 0.3;\n\nconst desktopTransition = {\n  duration: DURATION_DESKTOP,\n  ease: \"easeInOut\" as const,\n};\n\nconst mobileTransition = {\n  duration: DURATION_MOBILE,\n  ease: \"easeInOut\" as const,\n};\n\n/**\n * Animation variants for desktop modal (content and overlay).\n * Content: Fade in with subtle scale effect for a polished entrance.\n * Overlay: Simple fade to match content timing.\n * IMPORTANT: Content includes translate(-50%, -50%) to center the modal since\n * CSS transform is removed to prevent conflicts with Motion.\n */\nexport const desktopModalVariants: Variants = {\n  initial: {\n    opacity: 0,\n    scale: 0.95,\n    x: \"-50%\",\n    y: \"-50%\",\n    transition: desktopTransition,\n  },\n  animate: {\n    opacity: 1,\n    scale: 1,\n    x: \"-50%\",\n    y: \"-50%\",\n    transition: desktopTransition,\n  },\n  exit: {\n    opacity: 0,\n    scale: 0.95,\n    x: \"-50%\",\n    y: \"-50%\",\n    transition: desktopTransition,\n  },\n};\n\n/**\n * Animation variants for desktop overlay.\n * Matches desktop modal transition timing.\n */\nexport const desktopOverlayVariants: Variants = {\n  initial: {\n    opacity: 0,\n    transition: desktopTransition,\n  },\n  animate: {\n    opacity: 1,\n    transition: desktopTransition,\n  },\n  exit: {\n    opacity: 0,\n    transition: desktopTransition,\n  },\n};\n\n/**\n * Animation variants for mobile drawer (content).\n * Slides up from bottom with fade for a native-feeling drawer interaction.\n * Includes horizontal centering (translateX(-50%)) for proper positioning.\n */\nexport const mobileDrawerVariants: Variants = {\n  initial: {\n    opacity: 0,\n    x: \"-50%\",\n    y: \"100%\",\n    transition: mobileTransition,\n  },\n  animate: {\n    opacity: 1,\n    x: \"-50%\",\n    y: 0,\n    transition: mobileTransition,\n  },\n  exit: {\n    opacity: 0,\n    x: \"-50%\",\n    y: \"100%\",\n    transition: mobileTransition,\n  },\n};\n\n/**\n * Animation variants for mobile overlay.\n * Matches mobile drawer transition timing.\n */\nexport const mobileOverlayVariants: Variants = {\n  initial: {\n    opacity: 0,\n    transition: mobileTransition,\n  },\n  animate: {\n    opacity: 1,\n    transition: mobileTransition,\n  },\n  exit: {\n    opacity: 0,\n    transition: mobileTransition,\n  },\n};\n\n/**\n * Animation variants for draggable modals.\n * Only animates opacity, not transforms, since dragging handles positioning.\n * Uses desktop timing since draggable modals are desktop-only.\n * NOTE: Centering transforms are handled in StyledContent to work with drag positioning.\n */\nexport const draggableModalVariants: Variants = {\n  initial: {\n    opacity: 0,\n    transition: desktopTransition,\n  },\n  animate: {\n    opacity: 1,\n    transition: desktopTransition,\n  },\n  exit: {\n    opacity: 0,\n    transition: desktopTransition,\n  },\n};\n\n/**\n * Get the appropriate content variants based on context.\n */\nexport function getContentVariants(\n  isMobile: boolean,\n  isDraggable: boolean\n): Variants {\n  if (isDraggable) {\n    return draggableModalVariants;\n  }\n  return isMobile ? mobileDrawerVariants : desktopModalVariants;\n}\n\n/**\n * Get the appropriate overlay variants based on context.\n */\nexport function getOverlayVariants(isMobile: boolean): Variants {\n  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;\n}\n\n/**\n * Hook to detect mobile viewport based on MOBILE_BREAKPOINT (780px).\n * Returns true if viewport is at or below the mobile breakpoint.\n */\nexport function useIsMobile(): boolean {\n  const [isMobile, setIsMobile] = React.useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;\n  });\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n\n    // Modern browsers\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener(\"change\", handler);\n      return () => mediaQuery.removeEventListener(\"change\", handler);\n    }\n    // Fallback for older browsers\n    else if (mediaQuery.addListener) {\n      mediaQuery.addListener(handler);\n      return () => mediaQuery.removeListener(handler);\n    }\n  }, []);\n\n  return isMobile;\n}\n\n// Need to import React for the hook\nimport * as React from \"react\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n  COMMON,\n  FLEXBOX,\n  BORDER,\n  LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { MOBILE_BREAKPOINT } from \"../../shared/constants\";\nimport type { TypeModalFooterProps } from \"../ModalTypes\";\nimport { ModalCloseWrapper } from \"./ModalCloseWrapper\";\n\n/**\n * Base styled footer component for custom modal footers.\n *\n * Use this component when you need complete control over the footer layout\n * and don't want to use the slot-based ModalFooter component.\n *\n * @example\n * <ModalCustomFooter>\n *   <YourCustomFooterContent />\n * </ModalCustomFooter>\n */\nexport const ModalCustomFooter = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  padding: ${(props) => props.theme.space[400]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[800]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[800]};\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n\n  /* Flat bottom corners to blend with device edge on mobile */\n  @media (max-width: ${MOBILE_BREAKPOINT}) {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${BORDER}\n  ${LAYOUT}\n`;\n\nModalCustomFooter.displayName = \"ModalCustomFooter\";\n\n/**\n * Modal footer component for action buttons.\n *\n * This component only supports slot-based rendering with button props.\n * For custom footer layouts, use ModalCustomFooter instead.\n *\n * Provides automatic button wrapping and layout management. Supports three button positions:\n * - primaryButton: Main action button on the right (auto-closes modal)\n * - cancelButton: Secondary action on the right (auto-closes modal)\n * - leftAction: Optional action on the left (no auto-close, for destructive actions)\n *\n * @example\n * <ModalFooter\n *   cancelButton={<Button>Cancel</Button>}\n *   primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n *\n * @example\n * // With left action\n * <ModalFooter\n *   leftAction={<Button appearance=\"destructive\">Delete</Button>}\n *   cancelButton={<Button>Cancel</Button>}\n *   primaryButton={<Button appearance=\"primary\">Save</Button>}\n * />\n */\nexport const ModalFooter = (props: TypeModalFooterProps) => {\n  const { cancelButton, primaryButton, leftAction, ...rest } = props;\n\n  // If no simplified props provided, return empty footer\n  if (!cancelButton && !primaryButton && !leftAction) {\n    return null;\n  }\n\n  // Build simplified API layout\n  return (\n    <ModalCustomFooter data-slot=\"modal-footer\" data-qa-modal-footer {...rest}>\n      {/* Left action (e.g., Delete button) */}\n      {leftAction ? leftAction : null}\n\n      {/* Right-aligned button group (Cancel + Primary) */}\n      <Box display=\"flex\" gap={300} marginLeft=\"auto\">\n        {cancelButton && <ModalCloseWrapper>{cancelButton}</ModalCloseWrapper>}\n        {primaryButton && (\n          <ModalCloseWrapper>{primaryButton}</ModalCloseWrapper>\n        )}\n      </Box>\n    </ModalCustomFooter>\n  );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\n/**\n * Props for ModalCloseWrapper component.\n */\nexport interface ModalCloseWrapperProps {\n  /** The element to wrap with close functionality */\n  children: React.ReactNode;\n  /** Optional click handler called before closing the modal */\n  onClick?: (e: React.MouseEvent) => void;\n  /** Whether to merge props into the child element (default: true) */\n  asChild?: boolean;\n}\n\n/**\n * A wrapper component that closes the modal when its child is clicked.\n * Uses asChild pattern like Radix primitives - by default asChild is true.\n */\nexport const ModalCloseWrapper = (props: ModalCloseWrapperProps) => {\n  const { children, onClick, asChild = true, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  return (\n    <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>\n      {React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement<any>, {\n            \"data-slot\": \"modal-close-wrapper\",\n            \"data-qa-modal-close-wrapper\": \"\",\n            ...((children as React.ReactElement<any>).props || {}),\n          })\n        : children}\n    </Dialog.Close>\n  );\n};\n\nModalCloseWrapper.displayName = \"ModalCloseWrapper\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n  COMMON,\n  FLEXBOX,\n  BORDER,\n  LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeModalBodyProps } from \"../ModalTypes\";\n\n/**\n * Modal body component for the main content area.\n *\n * This component provides the scrollable content area of the modal with proper spacing\n * and overflow handling. It automatically takes up available space between the header\n * and footer, with vertical scrolling enabled when content exceeds available height.\n *\n * @example\n * <ModalBody>\n *   <Text>Your modal content goes here.</Text>\n *   <FormField label=\"Name\" />\n * </ModalBody>\n */\nconst StyledModalBody = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: ${(props) => `0 ${props.theme.space[400]}`};\n  ${(props) => props.theme.typography[300]}\n  color: ${(props) => props.theme.colors.text.body};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    flex-basis: 100%;\n  }\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${BORDER}\n  ${LAYOUT}\n`;\n\nStyledModalBody.displayName = \"ModalBody\";\n\nexport const ModalBody = React.forwardRef<HTMLDivElement, TypeModalBodyProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <StyledModalBody\n        data-slot=\"modal-body\"\n        data-qa-modal-body\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </StyledModalBody>\n    );\n  }\n);\n\nModalBody.displayName = \"ModalBody\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalDescriptionProps } from \"../ModalTypes\";\n\n/**\n * Modal description component that wraps content with accessible Dialog.Description.\n *\n * This component automatically connects description text to the modal dialog via ARIA attributes,\n * ensuring screen readers announce the description when the modal opens. Use this for additional\n * context beyond the title that helps users understand the modal's purpose.\n *\n * @example\n * <ModalDescription>\n *   Deleting this item will permanently remove it from your account.\n * </ModalDescription>\n */\nexport const ModalDescription = React.forwardRef<\n  HTMLDivElement,\n  TypeModalDescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n  return (\n    <Dialog.Description asChild {...descriptionProps}>\n      <Box\n        data-slot=\"modal-description\"\n        data-qa-modal-description\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Dialog.Description>\n  );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport type { TypeModalRailProps } from \"../ModalTypes\";\nimport {\n  MOBILE_BREAKPOINT,\n  RAIL_BUTTON_SIZE,\n  RAIL_OFFSET,\n  RAIL_GAP,\n} from \"../../shared/constants\";\n\n/**\n * Container for floating action buttons displayed alongside the modal.\n *\n * The rail provides a vertical column of action buttons positioned to the right of the modal\n * on desktop, and switches to a horizontal row positioned above the modal on mobile devices.\n * Always includes a close button by default, with support for additional custom actions.\n *\n * Actions are rendered through the Modal's `actions` prop or by directly including\n * ModalAction components as children.\n *\n * @example\n * <ModalRail>\n *   <ModalAction actionType=\"close\" aria-label=\"Close\" iconName=\"x-outline\" />\n *   <ModalAction aria-label=\"Expand\" iconName=\"arrows-pointing-out\" onClick={handleExpand} />\n * </ModalRail>\n */\nconst Rail = styled.div`\n  position: absolute;\n  top: ${RAIL_OFFSET}px;\n  right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));\n  display: flex;\n  flex-direction: column;\n  gap: ${RAIL_GAP}px;\n  z-index: 1;\n\n  @media (max-width: ${MOBILE_BREAKPOINT}) {\n    /* Move rail above the modal on the right side */\n    top: auto;\n    bottom: calc(100% + ${RAIL_OFFSET}px);\n    right: ${RAIL_OFFSET}px;\n    left: auto;\n    /* Change to horizontal layout with reversed order */\n    flex-direction: row-reverse;\n  }\n`;\n\nexport const ModalRail: React.FC<TypeModalRailProps> = ({ children }) => {\n  return (\n    <Rail\n      data-slot=\"modal-rail\"\n      data-qa-modal-rail\n      aria-label=\"Modal quick actions\"\n    >\n      {children}\n    </Rail>\n  );\n};\n\nModalRail.displayName = \"ModalRail\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeModalActionProps } from \"../ModalTypes\";\nimport { RAIL_BUTTON_SIZE } from \"../../shared/constants\";\n\n/**\n * Action button component for the modal's floating rail.\n *\n * These buttons appear in the vertical rail next to the modal (horizontal on mobile)\n * and provide quick access to common actions. Supports two action types:\n * - \"close\": Automatically closes the modal when clicked\n * - \"button\" (default): Custom action with your own onClick handler\n *\n * @example\n * // Close button (built-in functionality)\n * <ModalAction\n *   actionType=\"close\"\n *   aria-label=\"Close\"\n *   iconName=\"x-outline\"\n * />\n *\n * @example\n * // Custom action button\n * <ModalAction\n *   aria-label=\"Expand to fullscreen\"\n *   iconName=\"arrows-pointing-out\"\n *   onClick={() => console.log('expand')}\n * />\n */\n\nconst RailButton = styled.button`\n  width: ${RAIL_BUTTON_SIZE}px;\n  height: ${(props) => props.theme.space[500]};\n  display: inline-grid;\n  place-items: center;\n  border-radius: ${(props) => props.theme.radii.outer};\n  border: none;\n  background: ${(props) => props.theme.colors.button.overlay.background.base};\n  color: ${(props) => props.theme.colors.button.overlay.text.base};\n  cursor: pointer;\n  outline: none;\n  transition: all ${(props) => props.theme.duration.fast}\n    ${(props) => props.theme.easing.ease_inout};\n\n  &:hover {\n    background: ${(props) =>\n      props.theme.colors.button.overlay.background.hover};\n  }\n\n  &:hover,\n  &:active {\n    transform: none;\n  }\n\n  &:focus-visible {\n    ${focusRing}\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nexport const ModalAction: React.FC<TypeModalActionProps> = ({\n  \"aria-label\": ariaLabel,\n  iconName,\n  disabled,\n  actionType,\n  onClick,\n  ...rest\n}) => {\n  const button = (\n    <RailButton\n      data-slot=\"modal-action\"\n      data-qa-modal-action\n      data-qa-modal-action-type={actionType || \"button\"}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {iconName && <Icon name={iconName} size=\"small\" aria-label={ariaLabel} />}\n    </RailButton>\n  );\n\n  if (actionType === \"close\") {\n    return <Dialog.Close asChild>{button}</Dialog.Close>;\n  }\n\n  return button;\n};\n\nModalAction.displayName = \"ModalAction\";\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n  const encoded = encodeURIComponent(svgStr)\n    .replace(/'/g, \"%27\")\n    .replace(/\"/g, \"%22\");\n\n  const header = \"data:image/svg+xml,\";\n  const dataUrl = header + encoded;\n\n  return dataUrl;\n};\n\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n`;\n\nexport const focusRing = css`\n  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${theme.colors.button.primary.background.base},\n        transparent 70%\n      );\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n`;\n\nexport const pill = css`\n  min-width: ${theme.space[600]};\n  min-height: ${theme.space[600]};\n  padding: ${theme.space[300]};\n  border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { motion } from \"motion/react\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  type TypeSystemCommonProps,\n  type TypeSystemBorderProps,\n  type TypeSystemLayoutProps,\n  type TypeSystemPositionProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ninterface StyledOverlayProps\n  extends TypeSystemCommonProps,\n    TypeSystemBorderProps,\n    TypeSystemLayoutProps,\n    TypeSystemPositionProps {\n  allowInteraction?: boolean;\n}\n\n// Styled motion.div for the overlay wrapper\nexport const StyledMotionOverlay = styled(motion.div)<{ $zIndex?: number }>`\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  bottom: 0px;\n  z-index: ${(props) => props.$zIndex ?? 6};\n`;\n\nexport const StyledOverlay = styled.div.withConfig({\n  shouldForwardProp: (prop) => ![\"allowInteraction\"].includes(prop),\n})<StyledOverlayProps>`\n  width: 100%;\n  height: 100%;\n  background-color: ${(props) => props.theme.colors.overlay.background.base};\n\n  /* Allow clicking through overlay when modal is draggable */\n  ${(props) =>\n    props.allowInteraction &&\n    `\n    pointer-events: none;\n  `}\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\n"],"mappings":"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","names":["React","Dialog","Dialog","styled","COMMON","FLEXBOX","BORDER","LAYOUT","React","e","jsx","styled","COMMON","FLEXBOX","BORDER","LAYOUT","styled","Box","COMMON","FLEXBOX","BORDER","LAYOUT","React","Dialog","jsx","jsx","jsxs","styled","Box","COMMON","FLEXBOX","BORDER","LAYOUT","React","styled","Box","COMMON","FLEXBOX","BORDER","LAYOUT","jsx","React","Dialog","Box","jsx","styled","jsx","styled","Dialog","styled","jsx","styled","disabled","styled","motion","COMMON","BORDER","LAYOUT","jsx","jsxs"]}