@conveyorhq/arrow-ds 1.94.0 → 1.95.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.94.0",
+  "version": "1.95.1",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Modal/Modal.d.ts

@@ -1,3 +1,4 @@
+import React, { HTMLAttributes, ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
@@ -13,6 +14,7 @@ export interface ModalProps extends BoxProps {
     isOpen?: boolean;
     onClose?: () => void;
     autoFocus?: boolean;
+    lockScroll?: boolean;
     disableOutsideClick?: boolean;
     disableEscClose?: boolean;
     hideCloseButton?: boolean;
@@ -35,12 +37,54 @@ export declare const ModalTabs: (props: StackProps) => JSX.Element;
 export declare const ModalFooter: (props: BoxProps) => JSX.Element;
 export declare const ModalFooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
 export declare const ModalCloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
+interface ModalCloseProps {
+    children: ReactNode;
+    asChild?: boolean;
+}
+export declare const ModalClose: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & ModalCloseProps & React.RefAttributes<HTMLElement>>;
+export interface ModalRootProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    disableOutsideClick?: boolean;
+    disableEscClose?: boolean;
+}
+export declare const ModalRoot: ({ children, isOpen, onClose, disableOutsideClick, disableEscClose, }: ModalRootProps) => JSX.Element;
+export interface ModalPortalProps {
+    children: ReactNode;
+}
+export declare const ModalPortal: ({ children }: ModalPortalProps) => JSX.Element;
+export interface ModalOverlayProps {
+    children: ReactNode;
+    className?: string;
+    lockScroll?: boolean;
+    autoFocus?: boolean;
+}
+export declare const ModalOverlay: ({ children, className, lockScroll, autoFocus, }: ModalOverlayProps) => JSX.Element;
+export interface ModalContainerProps extends BoxProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const ModalContainer: ({ children, className, ...rest }: ModalContainerProps) => JSX.Element;
+export interface ModalContentProps extends BoxProps {
+    children: ReactNode;
+}
+export declare const ModalContent: React.ForwardRefExoticComponent<Pick<ModalContentProps, "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalScreen: ({ className, style, ...rest }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 export declare const Modal: {
-    (props: ModalProps): JSX.Element | null;
+    (props: ModalProps): JSX.Element;
+    Root: ({ children, isOpen, onClose, disableOutsideClick, disableEscClose, }: ModalRootProps) => JSX.Element;
+    Portal: ({ children }: ModalPortalProps) => JSX.Element;
+    Overlay: ({ children, className, lockScroll, autoFocus, }: ModalOverlayProps) => JSX.Element;
+    Container: ({ children, className, ...rest }: ModalContainerProps) => JSX.Element;
+    Content: React.ForwardRefExoticComponent<Pick<ModalContentProps, "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLDivElement>>;
+    Screen: ({ className, style, ...rest }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
     Tabs: (props: StackProps) => JSX.Element;
     Header: (props: BoxProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;
     Footer: (props: BoxProps) => JSX.Element;
     FooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
     CloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
+    Close: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & ModalCloseProps & React.RefAttributes<HTMLElement>>;
 };
+export {};

package/public/components/Modal/Modal.js

@@ -22,11 +22,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
+exports.Modal = exports.ModalScreen = exports.ModalContent = exports.ModalContainer = exports.ModalOverlay = exports.ModalPortal = exports.ModalRoot = exports.ModalClose = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 const react_remove_scroll_1 = require("react-remove-scroll");
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
 const Portal_1 = require("../Portal");
@@ -90,25 +91,60 @@ const ModalCloseButton = ({ className, ...rest }) => {
     return (react_1.default.createElement(CloseButton_1.CloseButton, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "close" }), className), onClick: onClose }, rest)));
 };
 exports.ModalCloseButton = ModalCloseButton;
-const Modal = (props) => {
-    const { title, secondaryTitle, description, children, isOpen, onClose, autoFocus = false, disableOutsideClick = true, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, noHeader = false, className, ...rest } = props;
-    const modalElement = react_1.useRef(null);
-    const showHeader = title || secondaryTitle || !hideCloseButton;
-    const [esc, setEsc] = react_1.useState(disableEscClose);
+exports.ModalClose = react_1.forwardRef(function ModalClose({ children, onClick, asChild = false, ...rest }, forwardedRef) {
+    const { onClose } = context_1.useModalContext();
+    const childrenRef = children.ref;
+    const ref = react_1.useMemo(() => react_merge_refs_1.default([forwardedRef, childrenRef]), [
+        forwardedRef,
+        childrenRef,
+    ]);
+    const mergedOnClick = (event) => {
+        if (onClose) {
+            onClose();
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    if (asChild && react_1.isValidElement(children)) {
+        return react_1.cloneElement(children, {
+            ref,
+            ...rest,
+            ...children.props,
+            onClick: mergedOnClick,
+        });
+    }
+    return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", onClick: mergedOnClick }, rest), children));
+});
+const ModalRoot = ({ children, isOpen, onClose, disableOutsideClick = true, disableEscClose = false, }) => {
     const [isSelectOpen, setIsSelectOpen] = react_1.useState(false);
+    const [esc, setEsc] = react_1.useState(disableEscClose);
     react_1.useEffect(() => {
         setEsc(disableEscClose);
     }, [disableEscClose]);
     hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (!esc && onClose) {
-            onClose();
-        }
-    });
-    hooks_1.useOutsideClick(modalElement, () => {
-        if (!disableOutsideClick && onClose) {
+        if (!esc && onClose && isOpen) {
             onClose();
         }
     });
+    const context = react_1.useMemo(() => {
+        return {
+            isOpen,
+            onClose,
+            isSelectOpen,
+            setIsSelectOpen,
+            disableOutsideClick,
+        };
+    }, [isOpen, onClose, isSelectOpen, disableOutsideClick]);
+    return (react_1.default.createElement(context_1.ModalContext.Provider, { value: context }, children));
+};
+exports.ModalRoot = ModalRoot;
+const ModalPortal = ({ children }) => {
+    return react_1.default.createElement(Portal_1.Portal, null, children);
+};
+exports.ModalPortal = ModalPortal;
+const ModalOverlay = ({ children, className, lockScroll = true, autoFocus = false, }) => {
+    const { isOpen } = context_1.useModalContext();
     react_1.useEffect(() => {
         if (isOpen) {
             document.body.classList.add("modal-open");
@@ -118,29 +154,67 @@ const Modal = (props) => {
         }
         return () => document.body.classList.remove("modal-open");
     }, [isOpen]);
-    return isOpen ? (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose, isSelectOpen, setIsSelectOpen } },
-        react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },
-                react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
-                    react_1.default.createElement(Box_1.Box, { className: bem_1.bem(`${cn}Container`) },
-                        react_1.default.createElement(Box_1.Box, Object.assign({ ref: modalElement, className: classnames_1.default([
-                                bem_1.bem(cn),
-                                bem_1.bem(cn, { m: size }),
-                                center && bem_1.bem(cn, { m: "center" }),
-                                className,
-                            ]) }, rest),
-                            !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
-                                title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
-                                react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                                    secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
-                                    !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
-                            description && (react_1.default.createElement(Description_1.Description, { className: bem_1.bem(cn, { e: "description" }) }, description)),
-                            children))))))) : null;
+    return (react_1.default.createElement(react_1.default.Fragment, null, isOpen && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "overlay" }), className) },
+        react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },
+            react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { enabled: lockScroll },
+                react_1.default.createElement(react_1.default.Fragment, null, children)))))));
+};
+exports.ModalOverlay = ModalOverlay;
+const ModalContainer = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(`${cn}Container`), className) }, rest), children));
+};
+exports.ModalContainer = ModalContainer;
+exports.ModalContent = react_1.forwardRef(function ModalContent({ children, className, ...rest }, forwardedRef) {
+    const { onClose, disableOutsideClick } = context_1.useModalContext();
+    const modalElement = react_1.useRef(null);
+    hooks_1.useOutsideClick(modalElement, () => {
+        if (!disableOutsideClick && onClose) {
+            onClose();
+        }
+    });
+    const ref = react_1.useMemo(() => react_merge_refs_1.default([modalElement, forwardedRef]), [
+        modalElement,
+        forwardedRef,
+    ]);
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ ref: ref, className: classnames_1.default(bem_1.bem(cn, { e: "content" }), className) }, rest), children));
+});
+const ModalScreen = ({ className, style, ...rest }) => {
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "screen" }), className) }, rest)));
+};
+exports.ModalScreen = ModalScreen;
+const Modal = (props) => {
+    const { title, secondaryTitle, description, children, isOpen, onClose, autoFocus = false, lockScroll = true, disableOutsideClick = true, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, noHeader = false, className, ...rest } = props;
+    const showHeader = title || secondaryTitle || !hideCloseButton;
+    return (react_1.default.createElement(exports.ModalRoot, { isOpen: isOpen, onClose: onClose, disableOutsideClick: disableOutsideClick, disableEscClose: disableEscClose },
+        react_1.default.createElement(exports.ModalPortal, null,
+            react_1.default.createElement(exports.ModalOverlay, { autoFocus: autoFocus, lockScroll: lockScroll },
+                react_1.default.createElement(exports.ModalContainer, null,
+                    react_1.default.createElement(exports.ModalContent, Object.assign({ className: classnames_1.default([
+                            bem_1.bem(cn),
+                            bem_1.bem(cn, { m: size }),
+                            center && bem_1.bem(cn, { m: "center" }),
+                            className,
+                        ]) }, rest),
+                        !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
+                            title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                            react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
+                                secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                                !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
+                        description && (react_1.default.createElement(Description_1.Description, { className: bem_1.bem(cn, { e: "description" }) }, description)),
+                        children)),
+                react_1.default.createElement(exports.ModalScreen, null)))));
 };
 exports.Modal = Modal;
+exports.Modal.Root = exports.ModalRoot;
+exports.Modal.Portal = exports.ModalPortal;
+exports.Modal.Overlay = exports.ModalOverlay;
+exports.Modal.Container = exports.ModalContainer;
+exports.Modal.Content = exports.ModalContent;
+exports.Modal.Screen = exports.ModalScreen;
 exports.Modal.Tabs = exports.ModalTabs;
 exports.Modal.Header = exports.ModalHeader;
 exports.Modal.Body = exports.ModalBody;
 exports.Modal.Footer = exports.ModalFooter;
 exports.Modal.FooterMultiStep = exports.ModalFooterMultiStep;
 exports.Modal.CloseButton = exports.ModalCloseButton;
+exports.Modal.Close = exports.ModalClose;

package/public/components/Modal/context.d.ts

@@ -1,8 +1,10 @@
 import { Dispatch, SetStateAction } from "react";
 export declare type ModalContextProps = {
+    isOpen?: boolean;
     onClose?(): void;
     isSelectOpen?: boolean;
     setIsSelectOpen?: Dispatch<SetStateAction<boolean>>;
+    disableOutsideClick?: boolean;
 };
 export declare const ModalContext: import("react").Context<ModalContextProps | undefined>;
 export declare function useModalContext(): ModalContextProps;

package/public/css/styles.css

@@ -2028,6 +2028,10 @@ override built-in Image component classes */
   border-right-width: 0;
 }
 
+.ads-ButtonGroup-button {
+  display: contents;
+}
+
 .ads-ButtonGroup--isFullWidth .ads-Button {
   flex: 1 1 auto;
 }
@@ -4651,9 +4655,34 @@ override built-in Image component classes */
   --modal-max-width: calc(100vw - 88px);
 }
 
-.ads-ModalContainer {
+.ads-Modal-overlay {
   position: fixed;
   top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 700;
+  overflow: auto;
+}
+
+.ads-Modal-screen {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+
+  -webkit-backdrop-filter: blur(4px);
+
+          backdrop-filter: blur(4px);
+}
+
+.ads-ModalContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   z-index: 900;
   display: flex;
@@ -4661,7 +4690,10 @@ override built-in Image component classes */
   width: 100vw;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.ads-Modal-content {
+  z-index: 1;
 }
 
 .ads-Modal {
@@ -7987,6 +8019,13 @@ override built-in Image component classes */
   position: sticky;
 }
 
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .top-0 {
   top: 0;
 }
@@ -8315,6 +8354,10 @@ override built-in Image component classes */
   width: 48px;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
 .w-40 {
   width: 160px;
 }