@sproutsocial/seeds-react-modal 2.1.2 → 2.2.1

package/dist/{ModalAction-BB7qJtQj.d.ts → ModalAction-gIgCE73I.d.ts}

@@ -9,295 +9,269 @@ import { TypeIconName } from '@sproutsocial/seeds-react-icon';
 /**
  * Props for ModalHeader component.
  *
- * Renders the modal's header with title and optional subtitle. Supports draggable functionality
- * when the modal has draggable enabled.
+ * Renders the modal's header with title and optional subtitle.
+ * Supports draggable functionality when the modal has draggable enabled.
  *
- * Note: This component only supports slots (title/subtitle props). For custom headers,
- * use ModalCustomHeader instead.
+ * Note: This component only supports slots (title/subtitle props).
+ * For custom headers, use ModalCustomHeader instead.
  */
 interface TypeModalHeaderProps extends TypeBoxProps {
     /** Modal title text displayed as a headline */
     title?: string;
     /**
      * Modal subtitle text.
-     *
-     * This is automatically wrapped in `Dialog.Description` from Radix UI,
-     * which provides accessible description text for screen readers. The subtitle
-     * provides additional context about the modal and is announced alongside
-     * the title when the dialog opens. Radix UI automatically connects this to
-     * the dialog via ARIA attributes (typically `aria-describedby` on the dialog root).
+     * Automatically wrapped in Dialog.Description for accessibility.
      */
     subtitle?: string;
-    /** Additional props for the Dialog.Title when title is provided */
+    /** Additional props for Dialog.Title when title is provided */
     titleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Title>, "asChild" | "children">;
-    /**
-     * Additional props for the Dialog.Description when subtitle is provided.
-     *
-     * Dialog.Description provides accessible description text for the modal that
-     * screen readers announce when the dialog opens. It complements Dialog.Title
-     * by providing additional context about the modal. Radix UI automatically
-     * connects this to the dialog via ARIA attributes.
-     */
+    /** Additional props for Dialog.Description when subtitle is provided */
     subtitleProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
 }
 /**
- * Props for ModalFooter component.
- *
- * Provides automatic button wrapping and layout management. At least one action
- * (cancelButton, primaryButton, or leftAction) must be provided.
- *
- * Note: This component only supports slots (button props). For custom footers,
- * use ModalCustomFooter instead.
+ * Props for ModalBody component.
  *
- * @example
- * // ✅ Valid - has primary button
- * <ModalFooter primaryButton={<Button>Save</Button>} />
+ * Renders the scrollable main content area of the modal.
+ */
+interface TypeModalBodyProps extends TypeBoxProps {
+    /** The main content of the modal body */
+    children?: React.ReactNode;
+}
+/**
+ * Props for ModalDescription component.
  *
- * @example
- * // ✅ Valid - has cancel and primary
- * <ModalFooter
- *   cancelButton={<Button>Cancel</Button>}
- *   primaryButton={<Button>Save</Button>}
- * />
+ * Wraps content with Dialog.Description for accessible descriptions.
+ */
+interface TypeModalDescriptionProps extends TypeBoxProps {
+    /** The description text content */
+    children: React.ReactNode;
+    /** Additional props for Dialog.Description */
+    descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
+}
+/**
+ * Props for ModalFooter component.
  *
- * @example
- * // ✅ Valid - left action only
- * <ModalFooter leftAction={<Button>Delete</Button>} />
+ * Provides automatic button wrapping and layout management.
+ * At least one action (cancelButton, primaryButton, or leftAction) must be provided.
  *
- * @example
- * // ❌ TypeScript Error - no actions provided
- * <ModalFooter />
+ * Note: This component only supports slots (button props).
+ * For custom footers, use ModalCustomFooter instead.
  */
 type TypeModalFooterProps = TypeBoxProps & ({
-    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
+    /** Primary action button - automatically wrapped in ModalCloseWrapper */
     primaryButton: React.ReactNode;
-    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
+    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper */
     cancelButton?: React.ReactNode;
-    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
+    /** Optional action on the far left (e.g., Delete) - NOT automatically wrapped */
     leftAction?: React.ReactNode;
 } | {
-    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
     primaryButton?: React.ReactNode;
-    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
     cancelButton: React.ReactNode;
-    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
     leftAction?: React.ReactNode;
 } | {
-    /** Primary action button - automatically wrapped in ModalCloseWrapper to close the modal */
     primaryButton?: React.ReactNode;
-    /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper to close the modal */
     cancelButton?: React.ReactNode;
-    /** Optional action on the far left (e.g., Delete button) - NOT automatically wrapped */
     leftAction: React.ReactNode;
 });
 /**
- * Props for ModalBody component.
+ * Props for ModalRail component.
  *
- * Renders the scrollable main content area of the modal between the header and footer.
+ * Container for floating action buttons displayed alongside the modal.
  */
-interface TypeModalBodyProps extends TypeBoxProps {
-    /** The main content of the modal body */
+type TypeModalRailProps = {
+    /** ModalAction components to display in the rail */
     children?: React.ReactNode;
-}
+};
 /**
- * Props for ModalDescription component.
+ * Props for ModalAction component.
+ *
+ * Action buttons that appear in the floating rail.
+ * Supports two action types:
+ * - "close": Automatically closes the modal (uses Dialog.Close)
+ * - "button": Custom action with user-defined onClick handler
  *
- * Wraps content with Radix UI's Dialog.Description for accessible modal descriptions
- * that are announced by screen readers.
+ * **IMPORTANT**: aria-label is required for accessibility.
  */
-interface TypeModalDescriptionProps extends TypeBoxProps {
-    /** The description text content */
+type TypeModalActionProps = ({
+    /** Action type - close triggers modal close */
+    actionType: "close";
+    /** REQUIRED: Accessible label for the button */
+    "aria-label": string;
+    /** Icon name from the Seeds icon set */
+    iconName?: TypeIconName;
+    /** Optional click handler called before closing */
+    onClick?: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">) | ({
+    /** Action type - button for custom actions (default) */
+    actionType?: "button";
+    /** REQUIRED: Accessible label for the button */
+    "aria-label": string;
+    /** Icon name from the Seeds icon set */
+    iconName?: TypeIconName;
+    /** Click handler for the button */
+    onClick?: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">);
+/**
+ * Base common props shared by all modal variants (without close button props).
+ */
+type TypeModalCommonPropsBase = TypeContainerProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> & {
+    /** Modal content */
     children: React.ReactNode;
-    /** Additional props for the Dialog.Description */
-    descriptionProps?: Omit<React.ComponentPropsWithoutRef<typeof Dialog.Description>, "asChild" | "children">;
-}
-/** Common props shared by all modal variants */
-type TypeModalCommonProps = TypeContainerProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> & {
     /** Controls whether the modal is open (controlled mode) */
     open?: boolean;
     /** Default open state for uncontrolled mode */
     defaultOpen?: boolean;
-    /** body content of the modal */
-    children: React.ReactNode;
     /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
-    /** The element that will trigger the modal when clicked.
-     *  Can be any React element like a button, link, or custom component. */
+    /**
+     * Element that triggers the modal when clicked.
+     * Can be any React element like a button, link, or custom component.
+     */
     modalTrigger?: React.ReactElement<any>;
-    /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
+    /** Modal description (automatically wrapped in Dialog.Description) */
     description?: string;
     /**
-     * Custom attributes to be added to the modals container
-     * Each key will be prepended with "data-" when rendered in the DOM
+     * Custom data attributes added to the modal container.
+     * Each key will be prepended with "data-" when rendered.
      */
     data?: Record<string, string | boolean | number>;
-    /** Optional quick actions to render on a modal side rail */
+    /** Quick actions to render on the modal side rail */
     actions?: TypeModalActionProps[];
-    /** Accessible label for the close button in the rail (defaults to "Close") */
-    closeButtonAriaLabel?: string;
+    /** Controls the z-index CSS property (defaults to 6 to match Modal v1) */
+    zIndex?: number;
 };
+/**
+ * Common props with close button accessibility enforcement.
+ *
+ * Ensures close button always has an accessible label through either:
+ * - closeButtonAriaLabel prop (required unless closeButtonProps has aria-label)
+ * - closeButtonProps with aria-label
+ *
+ * @example
+ * // ✅ Valid - has closeButtonAriaLabel
+ * <Modal closeButtonAriaLabel="Close dialog" />
+ *
+ * @example
+ * // ✅ Valid - has aria-label in closeButtonProps
+ * <Modal closeButtonProps={{ "aria-label": "Close dialog", onClick: handler }} />
+ *
+ * @example
+ * // ✅ Valid - has both (closeButtonProps aria-label takes precedence)
+ * <Modal
+ *   closeButtonAriaLabel="Close"
+ *   closeButtonProps={{ onClick: handler }}
+ * />
+ *
+ * @example
+ * // ❌ TypeScript Error - missing aria-label in both places
+ * <Modal closeButtonProps={{ onClick: handler }} />
+ */
+type TypeModalCommonProps = (TypeModalCommonPropsBase & {
+    /**
+     * Accessible label for the close button.
+     * Required unless closeButtonProps includes aria-label.
+     */
+    closeButtonAriaLabel: string;
+    /**
+     * Props to pass to the default floating close button.
+     * Use this for advanced customization; for simple aria-label changes, use closeButtonAriaLabel instead.
+     */
+    closeButtonProps?: Omit<TypeModalActionProps, "actionType" | "aria-label">;
+}) | (TypeModalCommonPropsBase & {
+    /**
+     * Accessible label for the close button.
+     * Optional when closeButtonProps includes aria-label.
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Props to pass to the default floating close button.
+     * Must include aria-label when closeButtonAriaLabel is not provided.
+     */
+    closeButtonProps: Omit<TypeModalActionProps, "actionType"> & {
+        "aria-label": string;
+    };
+});
 /**
  * Base props with draggable and showOverlay relationship enforced.
  *
- * When draggable is true, showOverlay must be false or undefined because
- * the overlay would block interaction with content behind the modal,
- * defeating the purpose of being able to drag the modal aside.
+ * When draggable is true, showOverlay must be false because the overlay
+ * would block interaction with content behind the modal.
  */
 type TypeModalBaseProps = (TypeModalCommonProps & {
-    /** Enable draggable functionality */
     draggable: true;
-    /**
-     * Whether to show the background overlay.
-     * Must be false when draggable is true to allow interaction with background content.
-     */
     showOverlay?: false;
 }) | (TypeModalCommonProps & {
-    /** Enable draggable functionality */
     draggable?: false;
-    /** Whether to show the background overlay (defaults to true) */
     showOverlay?: boolean;
 });
 /**
  * Modal props with title provided.
- * aria-label is optional since Dialog.Title can serve as the accessible name.
  */
 type TypeModalPropsWithTitle = TypeModalBaseProps & {
-    /** Simplified API: Modal title (creates ModalHeader automatically) */
+    /** Modal title (creates ModalHeader automatically) */
     title: string;
-    /**
-     * Simplified API: Modal subtitle (creates ModalHeader automatically).
-     *
-     * This is automatically wrapped in `Dialog.Description` from Radix UI,
-     * which provides accessible description text for screen readers. The subtitle
-     * provides additional context about the modal and is announced alongside
-     * the title when the dialog opens.
-     */
+    /** Modal subtitle (creates ModalHeader automatically) */
     subtitle?: string;
-    /** Accessible label for the modal dialog (optional when title or subtitle is provided) */
+    /** Accessible label for the modal dialog (optional when title is provided) */
     "aria-label"?: string;
 };
 /**
- * Modal props with subtitle provided but no title.
- * aria-label is optional since Dialog.Description can help identify the modal.
+ * Modal props with subtitle only (no title).
  */
 type TypeModalPropsWithSubtitleOnly = TypeModalBaseProps & {
-    /** Simplified API: Modal title (creates ModalHeader automatically) */
     title?: never;
-    /**
-     * Simplified API: Modal subtitle (creates ModalHeader automatically).
-     *
-     * This is automatically wrapped in `Dialog.Description` from Radix UI,
-     * which provides accessible description text for screen readers. The subtitle
-     * provides additional context about the modal and is announced alongside
-     * the title when the dialog opens.
-     */
+    /** Modal subtitle (creates ModalHeader automatically) */
     subtitle: string;
-    /** Accessible label for the modal dialog (optional when title or subtitle is provided) */
+    /** Accessible label for the modal dialog (optional when subtitle is provided) */
     "aria-label"?: string;
 };
 /**
  * Modal props without title or subtitle.
  *
- * **IMPORTANT**: When no header (title or subtitle) is provided,
- * `aria-label` is REQUIRED for accessibility compliance.
+ * aria-label is optional because users can provide accessible labeling through:
+ * - ModalHeader component as children
+ * - Dialog.Title or Dialog.Description components
+ * - Custom accessible content
  *
- * Without a visible header, screen readers need `aria-label` to identify
- * what the modal dialog is about.
- *
- * @example
- * // ✅ Valid - provides aria-label when no header
- * <Modal aria-label="Delete confirmation dialog">
- *   <p>Are you sure you want to delete this item?</p>
- * </Modal>
- *
- * @example
- * // ❌ Invalid - missing required aria-label
- * <Modal>
- *   <p>Are you sure you want to delete this item?</p>
- * </Modal>
+ * However, for best accessibility, provide one of:
+ * - `aria-label` prop
+ * - ModalHeader component with title
+ * - Dialog.Title component in children
  */
 type TypeModalPropsWithoutHeader = TypeModalBaseProps & {
-    /** Simplified API: Modal title (creates ModalHeader automatically) - not allowed when no header */
     title?: never;
-    /** Simplified API: Modal subtitle (creates ModalHeader automatically) - not allowed when no header */
     subtitle?: never;
     /**
-     * **REQUIRED: aria-label must be provided when no title or subtitle is given**
-     *
-     * Accessible label for the modal dialog. This is required for accessibility
-     * when the modal has no visible header. Screen readers use this to announce
-     * what the modal is about.
-     *
-     * **Error**: If you see a TypeScript error saying this property is missing,
-     * it means you need to either:
-     * 1. Provide `aria-label` (required when no header), OR
-     * 2. Provide `title` or `subtitle` (which makes aria-label optional)
-     *
-     * If you have a title or subtitle, this prop is optional.
+     * Accessible label for the modal dialog.
+     * Optional, but recommended when no title/subtitle props are provided.
      */
-    "aria-label": string;
+    "aria-label"?: string;
 };
 /**
- * Modal component props with discriminated union based on header presence.
- *
- * **Accessibility Requirements:**
- * - ✅ **With header** (title or subtitle provided): `aria-label` is optional
- * - ❌ **Without header** (no title, no subtitle): `aria-label` is **REQUIRED**
+ * Modal component props.
  *
- * TypeScript will error if you forget to provide `aria-label` when no header is present.
- * This ensures accessibility compliance and better screen reader support.
+ * **Accessibility Recommendations:**
+ * - With title/subtitle props: aria-label is optional (automatically accessible)
+ * - With ModalHeader as children: aria-label is optional (header provides labeling)
+ * - Without header props or components: aria-label is optional but strongly recommended
  *
  * @example
- * // ✅ Valid - has title, aria-label optional
+ * // With title prop
  * <Modal title="Delete Item" />
  *
  * @example
- * // ✅ Valid - has subtitle only, aria-label optional
- * <Modal subtitle="Confirmation" />
- *
- * @example
- * // ✅ Valid - no header, aria-label provided
- * <Modal aria-label="Delete confirmation dialog" />
+ * // With ModalHeader as children
+ * <Modal>
+ *   <ModalHeader title="Delete Item" />
+ * </Modal>
  *
  * @example
- * // ❌ TypeScript Error - no header and missing required aria-label
- * <Modal /> // Error: Property 'aria-label' is missing
+ * // With aria-label
+ * <Modal aria-label="Delete confirmation">
+ *   <ModalBody>Are you sure?</ModalBody>
+ * </Modal>
  */
 type TypeModalProps = TypeModalPropsWithTitle | TypeModalPropsWithSubtitleOnly | TypeModalPropsWithoutHeader;
-/**
- * Props for ModalRail component.
- *
- * Container for floating action buttons displayed alongside the modal.
- */
-type TypeModalRailProps = {
-    /** ModalAction components to display in the rail */
-    children?: React.ReactNode;
-};
-/**
- * Base props for modal action buttons.
- *
- * Extends standard button HTML attributes with modal-specific properties.
- */
-type ModalActionBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-    /** Icon name from the Seeds icon set */
-    iconName?: TypeIconName;
-    /** Optional click handler; ignored for type "close" */
-    onClick?: () => void;
-    /** Accessible name for the action button */
-    "aria-label": string;
-};
-/**
- * Props for ModalAction component.
- *
- * Discriminated union supporting two action types:
- * - "close": Automatically closes the modal when clicked (uses Dialog.Close)
- * - "button": Custom action with user-defined onClick handler
- */
-type TypeModalActionProps = (ModalActionBase & {
-    actionType: "close";
-}) | (ModalActionBase & {
-    actionType?: "button";
-});
 
 /**
  * Accessible modal dialog component built on Radix UI Dialog primitives.

package/dist/esm/{chunk-ETVICNHP.js → chunk-52SXX6AG.js}

@@ -179,6 +179,7 @@ var StyledMotionWrapper = styled(motion.div)`
   top: ${(props) => props.$isMobile ? "auto" : "50%"};
   left: 50%;
   bottom: ${(props) => props.$isMobile ? 0 : "auto"};
+  z-index: ${(props) => props.$zIndex ? props.$zIndex + 1 : 7};
 `;
 var StyledContent = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isDragging", "draggable"].includes(prop)
@@ -238,6 +239,7 @@ var StaticModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest
 }) => {
   const isMobile = useIsMobile();
@@ -246,11 +248,21 @@ var StaticModalContent = ({
     StyledMotionWrapper,
     {
       $isMobile: isMobile,
+      $zIndex: zIndex,
       variants: contentVariants,
       initial: "initial",
       animate: "animate",
       exit: "exit",
-      children: /* @__PURE__ */ jsx(StyledContent, { draggable: false, ...dataAttributes, ...rest, children })
+      children: /* @__PURE__ */ jsx(
+        StyledContent,
+        {
+          "data-slot": "modal-content",
+          draggable: false,
+          ...dataAttributes,
+          ...rest,
+          children
+        }
+      )
     }
   ) }) });
 };
@@ -258,6 +270,7 @@ var DraggableModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest
 }) => {
   const [position, setPosition] = React2.useState({ x: 0, y: 0 });
@@ -332,6 +345,7 @@ var DraggableModalContent = ({
         StyledMotionWrapper,
         {
           $isMobile: isMobile,
+          $zIndex: zIndex,
           variants: contentVariants,
           initial: "initial",
           animate: "animate",
@@ -346,6 +360,7 @@ var DraggableModalContent = ({
           children: /* @__PURE__ */ jsx(
             StyledContent,
             {
+              "data-slot": "modal-content",
               ref: contentRef,
               draggable: true,
               isDragging,
@@ -397,6 +412,8 @@ var ModalHeader = (props) => {
   return /* @__PURE__ */ jsx2(
     ModalCustomHeader,
     {
+      "data-slot": "modal-header",
+      "data-qa-modal-header": true,
       ...rest,
       onMouseDown: isDraggable ? dragContext?.onHeaderMouseDown : void 0,
       draggable: isDraggable,
@@ -422,7 +439,7 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 
 // src/v2/components/ModalCloseWrapper.tsx
-import "react";
+import * as React4 from "react";
 import * as Dialog3 from "@radix-ui/react-dialog";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ModalCloseWrapper = (props) => {
@@ -430,7 +447,11 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ jsx3(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children });
+  return /* @__PURE__ */ jsx3(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React4.isValidElement(children) ? React4.cloneElement(children, {
+    "data-slot": "modal-close-wrapper",
+    "data-qa-modal-close-wrapper": "",
+    ...children.props || {}
+  }) : children });
 };
 ModalCloseWrapper.displayName = "ModalCloseWrapper";
 
@@ -465,7 +486,7 @@ var ModalFooter = (props) => {
   if (!cancelButton && !primaryButton && !leftAction) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2(ModalCustomFooter, { ...rest, children: [
+  return /* @__PURE__ */ jsxs2(ModalCustomFooter, { "data-slot": "modal-footer", "data-qa-modal-footer": true, ...rest, children: [
     leftAction ? leftAction : null,
     /* @__PURE__ */ jsxs2(Box2, { display: "flex", gap: 300, marginLeft: "auto", children: [
       cancelButton && /* @__PURE__ */ jsx4(ModalCloseWrapper, { children: cancelButton }),
@@ -505,7 +526,16 @@ var StyledModalBody = styled4(Box3)`
 StyledModalBody.displayName = "ModalBody";
 var ModalBody = React6.forwardRef(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx5(StyledModalBody, { "data-qa-modal-body": true, ref, ...rest, children });
+    return /* @__PURE__ */ jsx5(
+      StyledModalBody,
+      {
+        "data-slot": "modal-body",
+        "data-qa-modal-body": true,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
 );
 ModalBody.displayName = "ModalBody";
@@ -516,7 +546,16 @@ 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) => {
-  return /* @__PURE__ */ jsx6(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ jsx6(Box4, { ref, ...rest, children }) });
+  return /* @__PURE__ */ jsx6(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ jsx6(
+    Box4,
+    {
+      "data-slot": "modal-description",
+      "data-qa-modal-description": true,
+      ref,
+      ...rest,
+      children
+    }
+  ) });
 });
 ModalDescription.displayName = "ModalDescription";
 
@@ -1188,6 +1227,9 @@ var ModalAction = ({
   const button = /* @__PURE__ */ jsx8(
     RailButton,
     {
+      "data-slot": "modal-action",
+      "data-qa-modal-action": true,
+      "data-qa-modal-action-type": actionType || "button",
       "aria-label": ariaLabel,
       title: ariaLabel,
       disabled: disabled2,
@@ -1219,6 +1261,7 @@ var StyledMotionOverlay = styled7(motion2.div)`
   left: 0px;
   right: 0px;
   bottom: 0px;
+  z-index: ${(props) => props.$zIndex ?? 6};
 `;
 var StyledOverlay = styled7.div.withConfig({
   shouldForwardProp: (prop) => !["allowInteraction"].includes(prop)
@@ -1257,6 +1300,8 @@ var Modal = (props) => {
     showOverlay = true,
     actions,
     closeButtonAriaLabel = "Close",
+    closeButtonProps,
+    zIndex = 6,
     ...rest
   } = props;
   const [isOpen, setIsOpen] = React11.useState(defaultOpen ?? false);
@@ -1295,11 +1340,19 @@ var Modal = (props) => {
           showOverlay && /* @__PURE__ */ jsx9(Dialog6.Overlay, { asChild: true, children: /* @__PURE__ */ jsx9(
             StyledMotionOverlay,
             {
+              $zIndex: zIndex,
               variants: overlayVariants,
               initial: "initial",
               animate: "animate",
               exit: "exit",
-              children: /* @__PURE__ */ jsx9(StyledOverlay, { allowInteraction: draggable })
+              children: /* @__PURE__ */ jsx9(
+                StyledOverlay,
+                {
+                  "data-slot": "modal-overlay",
+                  "data-qa-modal-overlay": true,
+                  allowInteraction: draggable
+                }
+              )
             }
           ) }),
           /* @__PURE__ */ jsxs3(
@@ -1308,6 +1361,7 @@ var Modal = (props) => {
               label,
               dataAttributes,
               draggable,
+              zIndex,
               rest,
               children: [
                 /* @__PURE__ */ jsxs3(ModalRail, { children: [
@@ -1315,8 +1369,9 @@ var Modal = (props) => {
                     ModalAction,
                     {
                       actionType: "close",
-                      "aria-label": closeButtonAriaLabel,
-                      iconName: "x-outline"
+                      iconName: "x-outline",
+                      ...closeButtonProps,
+                      "aria-label": closeButtonProps?.["aria-label"] ?? closeButtonAriaLabel
                     }
                   ),
                   actions?.map((action, idx) => /* @__PURE__ */ jsx9(ModalAction, { ...action }, idx))
@@ -1350,4 +1405,4 @@ export {
   ModalAction,
   Modal_default
 };
-//# sourceMappingURL=chunk-ETVICNHP.js.map
+//# sourceMappingURL=chunk-52SXX6AG.js.map