@conveyorhq/arrow-ds 1.93.0 → 1.95.0

package/package.json

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

package/public/components/Icon/Icon.d.ts

@@ -24,10 +24,12 @@ export declare enum ICON_TYPE {
     ARROWS_ALT = "arrows-alt",
     BACKWARD = "backward",
     BAN = "ban",
+    BANDAID = "band-aid",
     BARS = "bars",
     BATTERY_HALF = "battery-half",
     BED = "bed",
     BELL = "bell",
+    BIOHAZARD = "biohazard",
     BIRTHDAY_CAKE = "birthday-cake",
     BOLT = "bolt",
     BOOK = "book",
@@ -53,6 +55,7 @@ export declare enum ICON_TYPE {
     CLOCK = "clock",
     CLIPBOARD = "clipboard",
     CLOUD_DOWNLOAD_ALT = "cloud-download-alt",
+    CLOUD_UPLOAD_ALT = "cloud-upload-alt",
     COG = "cog",
     COINS = "coins",
     COLUMNS = "columns",
@@ -96,6 +99,7 @@ export declare enum ICON_TYPE {
     INFO_CIRCLE = "info-circle",
     KEY = "key",
     KEYBOARD = "keyboard",
+    LAPTOP = "laptop",
     LAYER_GROUP = "layer-group",
     LEVEL_UP_ALT = "level-up-alt",
     LIFE_RING = "life-ring",
@@ -129,6 +133,7 @@ export declare enum ICON_TYPE {
     SIGN_OUT_ALT = "sign-out-alt",
     SIGNAL = "signal",
     SIGNATURE = "signature",
+    SITEMAP = "sitemap",
     SLIDERS_H = "sliders-h",
     SORT = "sort",
     SORT_DOWN = "sort-down",

package/public/components/Icon/Icon.js

@@ -42,14 +42,16 @@ const faArchive_1 = require("@fortawesome/free-solid-svg-icons/faArchive");
 const faArrowDown_1 = require("@fortawesome/free-solid-svg-icons/faArrowDown");
 const faArrowLeft_1 = require("@fortawesome/free-solid-svg-icons/faArrowLeft");
 const faArrowRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRight");
-const faArrowUp_1 = require("@fortawesome/free-solid-svg-icons/faArrowUp");
 const faArrowsAlt_1 = require("@fortawesome/free-solid-svg-icons/faArrowsAlt");
+const faArrowUp_1 = require("@fortawesome/free-solid-svg-icons/faArrowUp");
 const faBackward_1 = require("@fortawesome/free-solid-svg-icons/faBackward");
 const faBan_1 = require("@fortawesome/free-solid-svg-icons/faBan");
+const faBandAid_1 = require("@fortawesome/free-solid-svg-icons/faBandAid");
 const faBars_1 = require("@fortawesome/free-solid-svg-icons/faBars");
 const faBatteryHalf_1 = require("@fortawesome/free-solid-svg-icons/faBatteryHalf");
 const faBed_1 = require("@fortawesome/free-solid-svg-icons/faBed");
 const faBell_1 = require("@fortawesome/free-solid-svg-icons/faBell");
+const faBiohazard_1 = require("@fortawesome/free-solid-svg-icons/faBiohazard");
 const faBirthdayCake_1 = require("@fortawesome/free-solid-svg-icons/faBirthdayCake");
 const faBolt_1 = require("@fortawesome/free-solid-svg-icons/faBolt");
 const faBook_1 = require("@fortawesome/free-solid-svg-icons/faBook");
@@ -75,11 +77,14 @@ const faCircleNotch_1 = require("@fortawesome/free-solid-svg-icons/faCircleNotch
 const faClipboard_1 = require("@fortawesome/free-solid-svg-icons/faClipboard");
 const faClock_2 = require("@fortawesome/free-solid-svg-icons/faClock");
 const faCloudDownloadAlt_1 = require("@fortawesome/free-solid-svg-icons/faCloudDownloadAlt");
+const faCloudUploadAlt_1 = require("@fortawesome/free-solid-svg-icons/faCloudUploadAlt");
 const faCog_1 = require("@fortawesome/free-solid-svg-icons/faCog");
+const faCoins_1 = require("@fortawesome/free-solid-svg-icons/faCoins");
 const faColumns_1 = require("@fortawesome/free-solid-svg-icons/faColumns");
 const faCommentAlt_1 = require("@fortawesome/free-solid-svg-icons/faCommentAlt");
 const faCompass_1 = require("@fortawesome/free-solid-svg-icons/faCompass");
 const faCompress_1 = require("@fortawesome/free-solid-svg-icons/faCompress");
+const faCopy_1 = require("@fortawesome/free-solid-svg-icons/faCopy");
 const faCrown_1 = require("@fortawesome/free-solid-svg-icons/faCrown");
 const faDoorClosed_1 = require("@fortawesome/free-solid-svg-icons/faDoorClosed");
 const faEdit_1 = require("@fortawesome/free-solid-svg-icons/faEdit");
@@ -115,6 +120,7 @@ const faIdBadge_1 = require("@fortawesome/free-solid-svg-icons/faIdBadge");
 const faImage_1 = require("@fortawesome/free-solid-svg-icons/faImage");
 const faInfoCircle_1 = require("@fortawesome/free-solid-svg-icons/faInfoCircle");
 const faKey_1 = require("@fortawesome/free-solid-svg-icons/faKey");
+const faLaptop_1 = require("@fortawesome/free-solid-svg-icons/faLaptop");
 const faLayerGroup_1 = require("@fortawesome/free-solid-svg-icons/faLayerGroup");
 const faLevelUpAlt_1 = require("@fortawesome/free-solid-svg-icons/faLevelUpAlt");
 const faLifeRing_1 = require("@fortawesome/free-solid-svg-icons/faLifeRing");
@@ -128,8 +134,8 @@ const faMapSigns_1 = require("@fortawesome/free-solid-svg-icons/faMapSigns");
 const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
 const faMousePointer_1 = require("@fortawesome/free-solid-svg-icons/faMousePointer");
 const faPalette_1 = require("@fortawesome/free-solid-svg-icons/faPalette");
-const faPaperPlane_1 = require("@fortawesome/free-solid-svg-icons/faPaperPlane");
 const faPaperclip_1 = require("@fortawesome/free-solid-svg-icons/faPaperclip");
+const faPaperPlane_1 = require("@fortawesome/free-solid-svg-icons/faPaperPlane");
 const faPause_1 = require("@fortawesome/free-solid-svg-icons/faPause");
 const faPen_1 = require("@fortawesome/free-solid-svg-icons/faPen");
 const faPlay_1 = require("@fortawesome/free-solid-svg-icons/faPlay");
@@ -147,6 +153,7 @@ const faShieldAlt_1 = require("@fortawesome/free-solid-svg-icons/faShieldAlt");
 const faSignal_1 = require("@fortawesome/free-solid-svg-icons/faSignal");
 const faSignature_1 = require("@fortawesome/free-solid-svg-icons/faSignature");
 const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
+const faSitemap_1 = require("@fortawesome/free-solid-svg-icons/faSitemap");
 const faSlidersH_1 = require("@fortawesome/free-solid-svg-icons/faSlidersH");
 const faSort_1 = require("@fortawesome/free-solid-svg-icons/faSort");
 const faSortDown_1 = require("@fortawesome/free-solid-svg-icons/faSortDown");
@@ -176,15 +183,13 @@ const faUsers_1 = require("@fortawesome/free-solid-svg-icons/faUsers");
 const faUserSecret_1 = require("@fortawesome/free-solid-svg-icons/faUserSecret");
 const faUserShield_1 = require("@fortawesome/free-solid-svg-icons/faUserShield");
 const faWrench_1 = require("@fortawesome/free-solid-svg-icons/faWrench");
-const faCopy_1 = require("@fortawesome/free-solid-svg-icons/faCopy");
-const faCoins_1 = require("@fortawesome/free-solid-svg-icons/faCoins");
 const svg_1 = require("./svg");
 const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const ShieldCheck_1 = require("./svg/ShieldCheck");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faArrowsAlt_1.faArrowsAlt, faBackward_1.faBackward, faBan_1.faBan, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBug_1.faBug, faBullhorn_1.faBullhorn, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCrown_1.faCrown, faCopy_1.faCopy, faCoins_1.faCoins, faDoorClosed_1.faDoorClosed, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHighlighter_1.faHighlighter, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperPlane_1.faPaperPlane, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faScroll_1.faScroll, faSearch_1.faSearch, faServer_1.faServer, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faWrench_1.faWrench);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBug_1.faBug, faBullhorn_1.faBullhorn, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudUploadAlt_1.faCloudUploadAlt, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCopy_1.faCopy, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHighlighter_1.faHighlighter, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faScroll_1.faScroll, faSearch_1.faSearch, faServer_1.faServer, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faWrench_1.faWrench);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
     CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
@@ -224,10 +229,12 @@ var ICON_TYPE;
     ICON_TYPE["ARROWS_ALT"] = "arrows-alt";
     ICON_TYPE["BACKWARD"] = "backward";
     ICON_TYPE["BAN"] = "ban";
+    ICON_TYPE["BANDAID"] = "band-aid";
     ICON_TYPE["BARS"] = "bars";
     ICON_TYPE["BATTERY_HALF"] = "battery-half";
     ICON_TYPE["BED"] = "bed";
     ICON_TYPE["BELL"] = "bell";
+    ICON_TYPE["BIOHAZARD"] = "biohazard";
     ICON_TYPE["BIRTHDAY_CAKE"] = "birthday-cake";
     ICON_TYPE["BOLT"] = "bolt";
     ICON_TYPE["BOOK"] = "book";
@@ -253,6 +260,7 @@ var ICON_TYPE;
     ICON_TYPE["CLOCK"] = "clock";
     ICON_TYPE["CLIPBOARD"] = "clipboard";
     ICON_TYPE["CLOUD_DOWNLOAD_ALT"] = "cloud-download-alt";
+    ICON_TYPE["CLOUD_UPLOAD_ALT"] = "cloud-upload-alt";
     ICON_TYPE["COG"] = "cog";
     ICON_TYPE["COINS"] = "coins";
     ICON_TYPE["COLUMNS"] = "columns";
@@ -296,6 +304,7 @@ var ICON_TYPE;
     ICON_TYPE["INFO_CIRCLE"] = "info-circle";
     ICON_TYPE["KEY"] = "key";
     ICON_TYPE["KEYBOARD"] = "keyboard";
+    ICON_TYPE["LAPTOP"] = "laptop";
     ICON_TYPE["LAYER_GROUP"] = "layer-group";
     ICON_TYPE["LEVEL_UP_ALT"] = "level-up-alt";
     ICON_TYPE["LIFE_RING"] = "life-ring";
@@ -329,6 +338,7 @@ var ICON_TYPE;
     ICON_TYPE["SIGN_OUT_ALT"] = "sign-out-alt";
     ICON_TYPE["SIGNAL"] = "signal";
     ICON_TYPE["SIGNATURE"] = "signature";
+    ICON_TYPE["SITEMAP"] = "sitemap";
     ICON_TYPE["SLIDERS_H"] = "sliders-h";
     ICON_TYPE["SORT"] = "sort";
     ICON_TYPE["SORT_DOWN"] = "sort-down";

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

@@ -4651,9 +4651,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 +4686,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 +8015,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 +8350,10 @@ override built-in Image component classes */
   width: 48px;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
 .w-40 {
   width: 160px;
 }