@manuscripts/style-guide 3.5.4 → 3.5.6

package/dist/cjs/components/Button.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = void 0;
+exports.IconButtonGroup = exports.ButtonGroup = exports.SecondaryIconButton = exports.RoundIconButton = exports.IconButton = exports.ToggleButtonAlt = exports.ToggleButton = exports.IconTextButton = exports.TertiaryButton = exports.LoginButton = exports.PrimaryButton = exports.SecondaryButton = exports.outlineStyle = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const dangerBtnStyles = (0, styled_components_1.css) `
   ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
@@ -70,6 +70,12 @@ const miniBtnStyles = (0, styled_components_1.css) `
   margin: 0 ${(props) => props.theme.grid.unit}px;
   line-height: 1;
 `;
+exports.outlineStyle = (0, styled_components_1.css) `
+  &:not([disabled]):focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 4px;
+  }
+`;
 const btnStyles = (0, styled_components_1.css) `
   align-items: center;
   background: transparent;
@@ -104,6 +110,8 @@ const btnStyles = (0, styled_components_1.css) `
   :disabled {
     ${disabledBtnStyles}
   }
+
+  ${exports.outlineStyle}
 `;
 const btnColors = (color, bg, border, important) => `
     ${color && 'color: ' + color}
@@ -128,11 +136,6 @@ exports.SecondaryButton = (0, styled_components_1.default)(ButtonTemplate) `
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.secondary.color.active, props.theme.colors.button.secondary.background.active, props.theme.colors.button.secondary.border.active, false)}
   }
-
-  &:focus-visible {
-    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
-    outline-offset: 4px;
-  }
 `;
 exports.PrimaryButton = (0, styled_components_1.default)(ButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.button.primary.color.default, props.theme.colors.button.primary.background.default, props.theme.colors.button.primary.border.default, false)}
@@ -141,11 +144,6 @@ exports.PrimaryButton = (0, styled_components_1.default)(ButtonTemplate) `
     ${(props) => btnColors(props.theme.colors.button.primary.color.hover, props.theme.colors.button.primary.background.hover, props.theme.colors.button.primary.border.hover, false)}
   }
 
-  &:focus-visible {
-    outline: 3px solid ${(props) => props.theme.colors.outline.focus} !important;
-    outline-offset: 4px;
-  }
-
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.primary.color.active, props.theme.colors.button.primary.background.active, props.theme.colors.button.primary.border.active, false)}
   }

package/dist/cjs/components/Checkbox.js

@@ -58,6 +58,7 @@ exports.CheckboxLabel = styled_components_1.default.label `
       border: 1.5px solid ${(props) => props.theme.colors.border.field.default};
       border-radius: 3px;
       margin-right: 10px;
+      margin-left: 4px;
       text-align: center;
       background: ${(props) => props.theme.colors.background.primary};
     }
@@ -74,7 +75,8 @@ exports.CheckboxLabel = styled_components_1.default.label `
   }
 
   input:focus-visible + div::before {
-    outline: none;
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
   }
 
   input:disabled + div::before {

package/dist/cjs/components/DraggableModal.js

@@ -52,9 +52,13 @@ const DraggableModal = ({ children, isOpen, onRequestClose, hideOverlay }) => {
             content: {
                 left: '0',
                 bottom: '0',
+                top: 'auto',
+                margin: '0',
                 transition: 'none',
                 position: 'fixed',
                 width: '100%',
+                maxWidth: '100%',
+                maxHeight: 'none',
             },
         }, children: (0, jsx_runtime_1.jsx)(DraggableModalContainer, { onMouseDown: mouseDown, onMouseMove: mouseMove, "data-cy": "find-replace-modal", children: children }) }));
 };

package/dist/cjs/components/Drawer.js

@@ -36,6 +36,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = exports.DrawerItemMeta = exports.DrawerItemLabel = exports.DrawerLabelContainer = exports.DrawerIcon = exports.DrawerListItem = exports.DrawerItemsList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("./Button");
+const List_1 = require("./List");
 const slideIn = (0, styled_components_1.keyframes) `
   from {
     transform: translateX(100%);
@@ -44,7 +46,7 @@ const slideIn = (0, styled_components_1.keyframes) `
     transform: translateX(0);
   }
 `;
-const DrawerContainer = styled_components_1.default.div `
+const DrawerContainer = (0, List_1.withFocusTrap)(styled_components_1.default.div `
   width: ${(props) => props.width || '300px'};
   background: ${(props) => props.theme.colors.background.primary};
   height: 100%;
@@ -55,9 +57,10 @@ const DrawerContainer = styled_components_1.default.div `
   right: 0;
   top: 0;
   z-index: 1;
-`;
-const DrawerBackButton = styled_components_1.default.button `
-  padding: 8px 16px;
+`);
+const DrawerBackButton = (0, styled_components_1.default)(Button_1.SecondaryButton) `
+  margin: 0 12px;
+  padding: 8px 4px;
   border: none;
   background: none;
   font-weight: ${(props) => props.theme.font.weight.normal};
@@ -66,7 +69,7 @@ const DrawerBackButton = styled_components_1.default.button `
   color: ${(props) => props.theme.colors.brand.default};
   cursor: pointer;
   display: flex;
-  align-items: center;
+  justify-content: start;
   gap: 4px;
 
   &:hover {
@@ -74,13 +77,13 @@ const DrawerBackButton = styled_components_1.default.button `
     opacity: 0.8;
   }
 `;
-exports.DrawerItemsList = styled_components_1.default.ul `
+exports.DrawerItemsList = (0, List_1.withListNavigation)(styled_components_1.default.ul `
   list-style: none;
-  padding: 0;
+  padding: 8px;
   margin: 0;
   overflow-y: auto;
-`;
-exports.DrawerListItem = styled_components_1.default.li `
+`);
+exports.DrawerListItem = (0, List_1.withNavigableListItem)(styled_components_1.default.li `
   padding: 8px 16px;
   cursor: pointer;
   display: flex;
@@ -95,7 +98,7 @@ exports.DrawerListItem = styled_components_1.default.li `
   &:last-child {
     border-bottom: none;
   }
-`;
+`);
 exports.DrawerIcon = styled_components_1.default.span `
   width: 20px;
   height: 20px;

package/dist/cjs/components/Inspector.js

@@ -79,6 +79,11 @@ exports.InspectorTab = (0, styled_components_1.default)(react_1.Tab) `
       border-color: ${(props) => props.theme.colors.brand.default};
       color: ${(props) => props.theme.colors.brand.default};
     }
+
+    &[data-headlessui-state~='selected'][data-headlessui-state~='focus'] {
+      outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+      outline-offset: -2px;
+    }
   }
 `;
 exports.InspectorTabPanelHeading = styled_components_1.default.div `

package/dist/cjs/components/List.js

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withListNavigation = withListNavigation;
+exports.withNavigableListItem = withNavigableListItem;
+exports.withFocusTrap = withFocusTrap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("./Button");
+const use_focus_cycle_1 = require("../hooks/use-focus-cycle");
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ;
+                ref.current = value;
+            }
+        });
+    };
+}
+function handleTabWithinListItem(e, items) {
+    if (e.key !== 'Tab') {
+        return false;
+    }
+    const activeElement = document.activeElement;
+    const currentItem = activeElement.closest('[data-list-item]');
+    const isOnInternalElement = currentItem &&
+        currentItem !== activeElement &&
+        currentItem.contains(activeElement);
+    if (currentItem && isOnInternalElement) {
+        const focusableElements = (0, use_focus_cycle_1.getFocusableElements)(currentItem);
+        const currentIndex = focusableElements.indexOf(activeElement);
+        const isFirstElement = currentIndex === 0;
+        const isLastElement = currentIndex === focusableElements.length - 1;
+        if (e.shiftKey && isFirstElement) {
+            e.preventDefault();
+            currentItem.focus();
+            return true;
+        }
+        else if (!e.shiftKey && isLastElement) {
+            const currentIndex = items.indexOf(currentItem);
+            const nextItem = items[currentIndex + 1];
+            if (nextItem) {
+                e.preventDefault();
+                nextItem.focus();
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function withListNavigation(Component) {
+    return (0, styled_components_1.default)((0, react_1.forwardRef)((props, forwardedRef) => {
+        const containerRef = (0, react_1.useRef)(null);
+        const tappingOutIndex = (0, react_1.useRef)(0);
+        const getListItems = (0, react_1.useCallback)(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return [];
+            }
+            return Array.from(element.querySelectorAll('[data-list-item]'));
+        }, []);
+        const getColumnCount = (0, react_1.useCallback)(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return 1;
+            }
+            const gridStyle = window.getComputedStyle(element);
+            return gridStyle
+                .getPropertyValue('grid-template-columns')
+                .split(' ')
+                .filter((val) => val !== '').length;
+        }, []);
+        const handleKeyDown = (0, react_1.useCallback)((e) => {
+            const items = getListItems();
+            const handled = handleTabWithinListItem(e, items);
+            if (handled) {
+                return;
+            }
+            const currentIndex = items.indexOf(document.activeElement);
+            const element = containerRef.current;
+            const columnCount = getColumnCount();
+            if (currentIndex === -1 || !element) {
+                return;
+            }
+            let newIndex = currentIndex;
+            switch (e.key) {
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    newIndex =
+                        (currentIndex - columnCount + items.length) % items.length;
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    newIndex = (currentIndex + columnCount) % items.length;
+                    break;
+                }
+                case 'ArrowLeft': {
+                    if (columnCount > 1) {
+                        e.preventDefault();
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    if (columnCount > 1) {
+                        e.preventDefault();
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                }
+                case 'Tab': {
+                    tappingOutIndex.current = currentIndex;
+                    break;
+                }
+            }
+            if (currentIndex !== newIndex) {
+                items[currentIndex].setAttribute('tabindex', '-1');
+                items[newIndex].setAttribute('tabindex', '0');
+                items[newIndex].focus();
+            }
+        }, [getListItems, getColumnCount, containerRef]);
+        const handelOnBlur = (0, react_1.useCallback)(() => {
+            if (tappingOutIndex.current) {
+                const items = getListItems();
+                items[tappingOutIndex.current].setAttribute('tabindex', '-1');
+                items[0].setAttribute('tabindex', '0');
+                tappingOutIndex.current = 0;
+            }
+        }, [getListItems]);
+        (0, react_1.useLayoutEffect)(() => {
+            const element = containerRef.current;
+            if (!element) {
+                return;
+            }
+            const firstItem = element.querySelector('[data-list-item]');
+            if (!firstItem) {
+                return;
+            }
+            if (firstItem.tabIndex === 0) {
+                return;
+            }
+            const tabbedElement = element.querySelector('[data-list-item][tabindex="0"]');
+            if (tabbedElement) {
+                tabbedElement.tabIndex = -1;
+            }
+            firstItem.tabIndex = 0;
+        });
+        return ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), ...props, onKeyDown: handleKeyDown, onBlur: handelOnBlur }));
+    })) `
+    outline: none;
+  `;
+}
+function withNavigableListItem(Component) {
+    return (0, styled_components_1.default)((0, react_1.forwardRef)((props, forwardedRef) => {
+        const listItemRef = (0, react_1.useRef)(null);
+        const handleKeyDown = (0, react_1.useCallback)((e) => {
+            const listItem = listItemRef.current;
+            const element = e.target;
+            if (element && listItem && element === listItem && e.key === 'Enter') {
+                const interactiveElements = [
+                    'BUTTON',
+                    'A',
+                    'INPUT',
+                    'TEXTAREA',
+                    'SELECT',
+                ];
+                if (!interactiveElements.includes(listItem.tagName)) {
+                    e.preventDefault();
+                    listItem.click();
+                }
+            }
+        }, []);
+        return ((0, jsx_runtime_1.jsx)(Component, { tabIndex: -1, "data-list-item": true, ref: mergeRefs(listItemRef, forwardedRef), onKeyDown: handleKeyDown, ...props }));
+    })) `
+    &:not([disabled]):focus-visible {
+      background-color: ${(props) => props.theme.colors.background.fifth};
+    }
+    ${Button_1.outlineStyle}
+  `;
+}
+function withFocusTrap(Component) {
+    return (0, react_1.forwardRef)((props, forwardedRef) => {
+        const containerRef = (0, react_1.useRef)(null);
+        const handleKeyDown = (0, react_1.useCallback)((e) => (0, use_focus_cycle_1.trapFocus)(e, containerRef.current), []);
+        return ((0, jsx_runtime_1.jsx)(Component, { ref: mergeRefs(containerRef, forwardedRef), onKeyDown: handleKeyDown, ...props }));
+    });
+}

package/dist/cjs/components/LoadingOverlay.js

@@ -5,29 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingOverlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_modal_1 = __importDefault(require("react-modal"));
-const LoadingOverlay = ({ children, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_modal_1.default, { isOpen: true, style: {
-            overlay: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'white',
-                zIndex: 20,
-            },
-            content: {
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: 'white',
-                display: 'flex',
-                flexDirection: 'column',
-                padding: 0,
-                overflow: 'auto',
-                border: 'none',
-            },
-        }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) }) }));
+const styled_components_1 = __importDefault(require("styled-components"));
+const LoadingOverlay = ({ children, }) => (0, jsx_runtime_1.jsx)(Overlay, { children: children });
 exports.LoadingOverlay = LoadingOverlay;
+const Overlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: auto;
+  border: none;
+  z-index: 20;
+`;

package/dist/cjs/components/MultiValueInput.js

@@ -59,6 +59,11 @@ const RemoveButton = styled_components_1.default.button `
   &:hover {
     background: black;
   }
+
+  &:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 const Input = styled_components_1.default.input `
   ${TextField_1.commonStyles}
@@ -121,6 +126,6 @@ const MultiValueInput = ({ id, inputType, placeholder = '', initialValues = [],
         : inputType === 'number'
             ? 'Enter number and press enter'
             : 'Enter text and press enter';
-    return ((0, jsx_runtime_1.jsxs)(Container, { children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { onMouseUp: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { children: [values.map((value, index) => ((0, jsx_runtime_1.jsxs)(Chip, { children: [value, (0, jsx_runtime_1.jsx)(RemoveButton, { type: 'button', onClick: () => handleRemoveValue(index), children: "\u00D7" })] }, index))), (0, jsx_runtime_1.jsx)(Input, { id: id, type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })] }));
 };
 exports.MultiValueInput = MultiValueInput;

package/dist/cjs/components/SelectedItemsBox.js

@@ -58,6 +58,11 @@ const RemoveButton = styled_components_1.default.button `
   padding: 0;
   font-family: ${(props) => props.theme.font.family.sans};
   font-weight: ${(props) => props.theme.font.weight.light};
+
+  &:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
     return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", children: [item.label, (0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" })] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));

package/dist/cjs/components/StyledModal.js

@@ -1,27 +1,152 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModal = exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = void 0;
+exports.ModalTitle = exports.ModalCardBody = exports.ScrollableModalContent = exports.ModelContent = exports.ModalSidebarTitle = exports.ModalSidebarHeader = exports.ModalSidebar = exports.ModalBody = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = exports.StyledModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_modal_1 = __importDefault(require("react-modal"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
 const Sidebar_1 = require("./Sidebar");
-const totalTransitionTime = 800;
-const transitionDelay = 300;
-const delayedTransitionTime = totalTransitionTime - transitionDelay;
-const ReactModalAdapter = ({ className, modalClassName, ...props }) => {
-    props.style = props.style || {};
-    if (props.pointerEventsOnBackdrop == 'none') {
-        props.style.content = {
-            ...props.style.content,
-            pointerEvents: 'all',
+const StyledModal = ({ isOpen, onRequestClose, shouldCloseOnOverlayClick = true, hideOverlay = false, pointerEventsOnBackdrop, children, className, style, }) => {
+    const dialogRef = (0, react_1.useRef)(null);
+    const closedByCancelRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleNativeClose = (wasOpen) => {
+            if (wasOpen && !closedByCancelRef.current) {
+                onRequestClose?.();
+            }
+            closedByCancelRef.current = false;
         };
-    }
-    return ((0, jsx_runtime_1.jsx)(react_modal_1.default, { className: modalClassName, portalClassName: className, closeTimeoutMS: totalTransitionTime, preventScroll: true, appElement: document.getElementById('root'), ...props }));
+        const listener = () => handleNativeClose(isOpen);
+        dialog.addEventListener('close', listener);
+        return () => dialog.removeEventListener('close', listener);
+    }, [isOpen, onRequestClose]);
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        const handleCancel = (e) => {
+            closedByCancelRef.current = true;
+            onRequestClose?.(e);
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onRequestClose]);
+    const handleBackdropClick = (e) => {
+        if (shouldCloseOnOverlayClick && e.target === dialogRef.current) {
+            onRequestClose?.();
+        }
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Dialog, { ref: dialogRef, onClick: handleBackdropClick, "$hideOverlay": hideOverlay, "$pointerEventsOnBackdrop": pointerEventsOnBackdrop, className: className, style: style?.content, children: children }), document.body);
 };
+exports.StyledModal = StyledModal;
+const Dialog = styled_components_1.default.dialog `
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  opacity: 1;
+  transition:
+    opacity 0.5s ease-in-out,
+    display 0.5s ease allow-discrete,
+    overlay 0.5s ease allow-discrete;
+
+  &:not([open]) {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+
+  &::backdrop {
+    ${(props) => {
+    if (props.$hideOverlay) {
+        return (0, styled_components_1.css) `
+          background: transparent;
+        `;
+    }
+    if (props.$pointerEventsOnBackdrop === 'none') {
+        return (0, styled_components_1.css) `
+          background: rgba(0, 0, 0, 0.1);
+        `;
+    }
+    return (0, styled_components_1.css) `
+        background: ${props.theme.colors.background.dark};
+      `;
+}}
+    opacity: 1;
+    pointer-events: ${(props) => props.$pointerEventsOnBackdrop || 'auto'};
+    transition:
+      opacity 0.5s ease-in-out,
+      display 0.5s ease allow-discrete,
+      overlay 0.5s ease allow-discrete;
+  }
+
+  &:not([open])::backdrop {
+    opacity: 0;
+  }
+
+  @starting-style {
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+`;
 exports.ModalContainer = styled_components_1.default.div `
   background: ${(props) => props.theme.colors.background.primary};
   border-radius: ${(props) => props.theme.grid.radius.default};
@@ -119,67 +244,3 @@ exports.ModalTitle = styled_components_1.default.h2 `
   color: ${(props) => props.theme.colors.text.primary};
   margin: 0 0 20px 0;
 `;
-exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs({
-    closeTimeoutMS: totalTransitionTime,
-    overlayClassName: {
-        base: 'Overlay',
-        afterOpen: 'Overlay--after-open',
-        beforeClose: 'Overlay--before-close',
-    },
-    modalClassName: {
-        base: 'Modal',
-        afterOpen: 'Modal--after-open',
-        beforeClose: 'Modal--before-close',
-    },
-}) `
-  .Overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: ${(props) => props.hideOverlay
-    ? 'transparent'
-    : props.pointerEventsOnBackdrop === 'none'
-        ? 'rgba(0,0,0,0.1)'
-        : props.theme.colors.background.dark};
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: ${(props) => props.pointerEventsOnBackdrop || 'auto'};
-
-    &--after-open {
-      transition: opacity ${totalTransitionTime}ms ease-in-out;
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition: opacity ${delayedTransitionTime}ms ease-in-out;
-      transition-delay: ${transitionDelay}ms;
-      opacity: 0;
-    }
-  }
-
-  .Modal {
-    background: transparent;
-    border: none;
-    position: relative;
-    outline: none;
-    opacity: 0;
-    transition:
-      opacity ${delayedTransitionTime}ms ease-in-out,
-      top ${delayedTransitionTime}ms ease-in-out;
-    transition-delay: ${transitionDelay}ms;
-
-    &--after-open {
-      opacity: 1;
-    }
-
-    &--before-close {
-      transition-delay: 0ms;
-      opacity: 0;
-    }
-  }
-`;