@jobber/components 6.41.0 → 6.42.0

package/dist/Modal/index.cjs

@@ -1,22 +1,223 @@
 'use strict';
 
-var Modal = require('../Modal-cjs.js');
-require('react');
-require('react-dom');
-require('classnames');
-require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
-require('../useOnKeyDown-cjs.js');
-require('../useFocusTrap-cjs.js');
-require('../Heading-cjs.js');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var classnames = require('classnames');
+var framerMotion = require('framer-motion');
+var useRefocusOnActivator = require('../useRefocusOnActivator-cjs.js');
+var useOnKeyDown = require('../useOnKeyDown-cjs.js');
+var useFocusTrap = require('../useFocusTrap-cjs.js');
+var Heading = require('../Heading-cjs.js');
+var Button = require('../Button-cjs.js');
+var ButtonDismiss = require('../ButtonDismiss-cjs.js');
+var AtlantisPortalContent = require('../AtlantisPortalContent-cjs.js');
+var noop = require('../noop-cjs.js');
+var floatingUi_react = require('../floating-ui.react-cjs.js');
 require('../Typography-cjs.js');
-require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../ButtonDismiss-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
 
+var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
 
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
 
-exports.Modal = Modal.Modal;
+const ModalLegacy = ({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) => {
+    const modalClassName = classnames(styles$1.modal, size && sizes[size]);
+    useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const modalRef = useFocusTrap.useFocusTrap_2(open);
+    useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
+    const template = (React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
+        React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
+            React.createElement(framerMotion.motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
+            React.createElement(framerMotion.motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                    duration: 0.2,
+                    ease: "easeInOut",
+                } },
+                title != undefined && (React.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
+                children,
+                React.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction })))))));
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+        ? ReactDOM.createPortal(template, document.body)
+        : template;
+    function handleRequestClose() {
+        if (open && onRequestClose) {
+            onRequestClose();
+        }
+    }
+};
+function Header({ title, dismissible, onRequestClose }) {
+    return (React.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
+        React.createElement(Heading.Heading, { level: 2 }, title),
+        dismissible && (React.createElement("div", { className: styles$1.closeButton },
+            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+}
+function Actions({ primary, secondary, tertiary }) {
+    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
+    if (secondary != undefined) {
+        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
+    }
+    if (tertiary != undefined) {
+        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
+    }
+    return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: styles$1.actionBar },
+        React.createElement("div", { className: styles$1.rightAction },
+            primary && React.createElement(Button.Button, Object.assign({}, primary)),
+            secondary && React.createElement(Button.Button, Object.assign({}, secondary))),
+        tertiary && (React.createElement("div", { className: styles$1.leftAction },
+            React.createElement(Button.Button, Object.assign({}, tertiary))))))));
+}
+
+function useModal({ open, activatorRef: refProp, onRequestClose, }) {
+    const nodeId = floatingUi_react.useFloatingNodeId();
+    const defaultActivatorRef = React.useRef(null);
+    const activatorRef = refProp !== null && refProp !== void 0 ? refProp : defaultActivatorRef;
+    const { refs: floatingRefs, context: floatingContext } = floatingUi_react.useFloating({
+        elements: { reference: activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current },
+        nodeId,
+        onOpenChange: (newOpen) => {
+            if (!newOpen) {
+                onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+            }
+        },
+        open: open,
+    });
+    const click = floatingUi_react.useClick(floatingContext);
+    const dismiss = floatingUi_react.useDismiss(floatingContext, {
+        outsidePressEvent: "click",
+        escapeKey: true,
+        bubbles: true,
+    });
+    const role = floatingUi_react.useRole(floatingContext);
+    floatingUi_react.useInteractions([click, dismiss, role]);
+    const parentId = floatingUi_react.useFloatingParentNodeId();
+    return {
+        floatingRefs,
+        floatingContext,
+        nodeId,
+        activatorRef,
+        parentId,
+    };
+}
+
+const ModalContext = React.createContext({
+    open: false,
+    onRequestClose: noop.noop,
+    activatorRef: { current: null },
+    floatingRefs: null,
+    floatingContext: {},
+    size: undefined,
+    floatingNodeId: undefined,
+    dismissible: true,
+});
+function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
+    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId } = useModal({
+        open,
+        activatorRef: refProp,
+        onRequestClose,
+    });
+    const content = (React.createElement(ModalContext.Provider, { value: {
+            onRequestClose,
+            activatorRef,
+            floatingRefs,
+            floatingContext,
+            size,
+            open,
+            floatingNodeId: nodeId,
+            dismissible,
+            modalLabelledBy,
+        } }, children));
+    if (parentId) {
+        return content;
+    }
+    return React.createElement(floatingUi_react.FloatingTree, null, content);
+}
+function useModalContext() {
+    return React.useContext(ModalContext);
+}
+
+var styles = {"overlay":"cRhQeXmZobs-","modal":"OiqCKNmbHZ0-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
+
+function useModalStyles(size) {
+    return {
+        modal: classnames(styles.modal, size && sizes[size]),
+        overlay: styles.overlay,
+        header: styles.header,
+        dismissButton: styles.closeButton,
+        actionBar: styles.actionBar,
+        leftAction: styles.leftAction,
+        rightAction: styles.rightAction,
+    };
+}
+
+const AnimatedOverlay = framerMotion.motion(floatingUi_react.FloatingOverlay);
+function ModalHeader({ title, children }) {
+    const { header, dismissButton } = useModalStyles();
+    const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
+    if (children) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement("div", { className: header, "data-testid": "ATL-Modal-Header", id: modalLabelledBy },
+        React.createElement(Heading.Heading, { level: 2 }, title),
+        dismissible && (React.createElement("div", { className: dismissButton },
+            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+}
+function ModalActions({ primary, secondary, tertiary, }) {
+    const { actionBar, rightAction, leftAction } = useModalStyles();
+    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
+    return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: actionBar, "data-testid": "ATL-Modal-Actions" },
+        React.createElement("div", { className: rightAction },
+            primary && React.createElement(Button.Button, Object.assign({}, primary)),
+            secondary && (React.createElement(Button.Button, Object.assign({}, secondary, { type: "primary", variation: "subtle" })))),
+        tertiary && (React.createElement("div", { className: leftAction },
+            React.createElement(Button.Button, Object.assign({}, tertiary, { type: "secondary", variation: "destructive" }))))))));
+}
+function ModalActivator({ children }) {
+    const { activatorRef } = useModalContext();
+    return (React.createElement("span", { ref: activatorRef, style: { display: "contents" } }, children));
+}
+/**
+ * Background overlay for the modal. Used in the ModalContent.
+ */
+function ModalOverlay({ children }) {
+    const { size } = useModalContext();
+    const { overlay } = useModalStyles(size);
+    return (React.createElement(AnimatedOverlay, { className: overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-testid": "ATL-Modal-Overlay" }, children));
+}
+function ModalContent({ children }) {
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, } = useModalContext();
+    const { modal } = useModalStyles(size);
+    return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
+        React.createElement(floatingUi_react.FloatingPortal, null,
+            React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
+                React.createElement(ModalOverlay, null,
+                    React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
+                        React.createElement(framerMotion.motion.div, { "data-floating-ui-focusable": true, "aria-labelledby": modalLabelledBy, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 0.8 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            }, ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: -1 }, children)))))))));
+}
+
+function Modal(props) {
+    return React.createElement(ModalLegacy, Object.assign({}, props));
+}
+Modal.Header = ModalHeader;
+Modal.Actions = ModalActions;
+Modal.Activator = ModalActivator;
+Modal.Provider = ModalProvider;
+Modal.Content = ModalContent;
+
+exports.Modal = Modal;
+exports.useModalContext = useModalContext;
+exports.useModalStyles = useModalStyles;

package/dist/Modal/index.d.ts

@@ -1 +1,15 @@
-export { Modal } from "./Modal";
+import { ModalProvider } from "./ModalContext.rebuilt";
+import { ModalActions, ModalActivator, ModalContent, ModalHeader } from "./Modal.rebuilt";
+import { ModalLegacyProps } from "./Modal.types";
+export type { ModalLegacyProps as ModalProps } from "./Modal.types";
+declare function Modal(props: ModalLegacyProps): JSX.Element;
+declare namespace Modal {
+    var Header: typeof ModalHeader;
+    var Actions: typeof ModalActions;
+    var Activator: typeof ModalActivator;
+    var Provider: typeof ModalProvider;
+    var Content: typeof ModalContent;
+}
+export { useModalContext } from "./ModalContext.rebuilt";
+export { useModalStyles } from "./useModalStyles";
+export { Modal };

package/dist/Modal/index.mjs

@@ -1,16 +1,219 @@
-export { M as Modal } from '../Modal-es.js';
-import 'react';
-import 'react-dom';
-import 'classnames';
-import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
-import '../useOnKeyDown-es.js';
-import '../useFocusTrap-es.js';
-import '../Heading-es.js';
+import React__default, { useRef, createContext, useContext } from 'react';
+import ReactDOM__default from 'react-dom';
+import classnames from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
+import { u as useRefocusOnActivator_2 } from '../useRefocusOnActivator-es.js';
+import { u as useOnKeyDown_2 } from '../useOnKeyDown-es.js';
+import { u as useFocusTrap_2 } from '../useFocusTrap-es.js';
+import { H as Heading } from '../Heading-es.js';
+import { B as Button } from '../Button-es.js';
+import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
+import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
+import { n as noop } from '../noop-es.js';
+import { a as useFloatingNodeId, b as useFloating, i as useClick, e as useDismiss, j as useRole, f as useInteractions, u as useFloatingParentNodeId, h as FloatingTree, k as FloatingOverlay, F as FloatingNode, g as FloatingPortal, l as FloatingFocusManager } from '../floating-ui.react-es.js';
 import '../Typography-es.js';
-import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../ButtonDismiss-es.js';
+import '../AtlantisThemeContext-es.js';
+import '../_commonjsHelpers-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';
+
+var styles$1 = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
+
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
+
+const ModalLegacy = ({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) => {
+    const modalClassName = classnames(styles$1.modal, size && sizes[size]);
+    useRefocusOnActivator_2(open);
+    const modalRef = useFocusTrap_2(open);
+    useOnKeyDown_2(handleRequestClose, "Escape");
+    const template = (React__default.createElement(AtlantisPortalContent, null,
+        React__default.createElement(AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, role: "dialog", className: styles$1.container, tabIndex: 0 },
+            React__default.createElement(motion.div, { key: styles$1.overlay, className: styles$1.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
+            React__default.createElement(motion.div, { key: styles$1.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                    duration: 0.2,
+                    ease: "easeInOut",
+                } },
+                title != undefined && (React__default.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
+                children,
+                React__default.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction })))))));
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+        ? ReactDOM__default.createPortal(template, document.body)
+        : template;
+    function handleRequestClose() {
+        if (open && onRequestClose) {
+            onRequestClose();
+        }
+    }
+};
+function Header({ title, dismissible, onRequestClose }) {
+    return (React__default.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
+        React__default.createElement(Heading, { level: 2 }, title),
+        dismissible && (React__default.createElement("div", { className: styles$1.closeButton },
+            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+}
+function Actions({ primary, secondary, tertiary }) {
+    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
+    if (secondary != undefined) {
+        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
+    }
+    if (tertiary != undefined) {
+        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
+    }
+    return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: styles$1.actionBar },
+        React__default.createElement("div", { className: styles$1.rightAction },
+            primary && React__default.createElement(Button, Object.assign({}, primary)),
+            secondary && React__default.createElement(Button, Object.assign({}, secondary))),
+        tertiary && (React__default.createElement("div", { className: styles$1.leftAction },
+            React__default.createElement(Button, Object.assign({}, tertiary))))))));
+}
+
+function useModal({ open, activatorRef: refProp, onRequestClose, }) {
+    const nodeId = useFloatingNodeId();
+    const defaultActivatorRef = useRef(null);
+    const activatorRef = refProp !== null && refProp !== void 0 ? refProp : defaultActivatorRef;
+    const { refs: floatingRefs, context: floatingContext } = useFloating({
+        elements: { reference: activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current },
+        nodeId,
+        onOpenChange: (newOpen) => {
+            if (!newOpen) {
+                onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+            }
+        },
+        open: open,
+    });
+    const click = useClick(floatingContext);
+    const dismiss = useDismiss(floatingContext, {
+        outsidePressEvent: "click",
+        escapeKey: true,
+        bubbles: true,
+    });
+    const role = useRole(floatingContext);
+    useInteractions([click, dismiss, role]);
+    const parentId = useFloatingParentNodeId();
+    return {
+        floatingRefs,
+        floatingContext,
+        nodeId,
+        activatorRef,
+        parentId,
+    };
+}
+
+const ModalContext = createContext({
+    open: false,
+    onRequestClose: noop,
+    activatorRef: { current: null },
+    floatingRefs: null,
+    floatingContext: {},
+    size: undefined,
+    floatingNodeId: undefined,
+    dismissible: true,
+});
+function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
+    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId } = useModal({
+        open,
+        activatorRef: refProp,
+        onRequestClose,
+    });
+    const content = (React__default.createElement(ModalContext.Provider, { value: {
+            onRequestClose,
+            activatorRef,
+            floatingRefs,
+            floatingContext,
+            size,
+            open,
+            floatingNodeId: nodeId,
+            dismissible,
+            modalLabelledBy,
+        } }, children));
+    if (parentId) {
+        return content;
+    }
+    return React__default.createElement(FloatingTree, null, content);
+}
+function useModalContext() {
+    return useContext(ModalContext);
+}
+
+var styles = {"overlay":"cRhQeXmZobs-","modal":"OiqCKNmbHZ0-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
+
+function useModalStyles(size) {
+    return {
+        modal: classnames(styles.modal, size && sizes[size]),
+        overlay: styles.overlay,
+        header: styles.header,
+        dismissButton: styles.closeButton,
+        actionBar: styles.actionBar,
+        leftAction: styles.leftAction,
+        rightAction: styles.rightAction,
+    };
+}
+
+const AnimatedOverlay = motion(FloatingOverlay);
+function ModalHeader({ title, children }) {
+    const { header, dismissButton } = useModalStyles();
+    const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
+    if (children) {
+        return React__default.createElement(React__default.Fragment, null, children);
+    }
+    return (React__default.createElement("div", { className: header, "data-testid": "ATL-Modal-Header", id: modalLabelledBy },
+        React__default.createElement(Heading, { level: 2 }, title),
+        dismissible && (React__default.createElement("div", { className: dismissButton },
+            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+}
+function ModalActions({ primary, secondary, tertiary, }) {
+    const { actionBar, rightAction, leftAction } = useModalStyles();
+    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
+    return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: actionBar, "data-testid": "ATL-Modal-Actions" },
+        React__default.createElement("div", { className: rightAction },
+            primary && React__default.createElement(Button, Object.assign({}, primary)),
+            secondary && (React__default.createElement(Button, Object.assign({}, secondary, { type: "primary", variation: "subtle" })))),
+        tertiary && (React__default.createElement("div", { className: leftAction },
+            React__default.createElement(Button, Object.assign({}, tertiary, { type: "secondary", variation: "destructive" }))))))));
+}
+function ModalActivator({ children }) {
+    const { activatorRef } = useModalContext();
+    return (React__default.createElement("span", { ref: activatorRef, style: { display: "contents" } }, children));
+}
+/**
+ * Background overlay for the modal. Used in the ModalContent.
+ */
+function ModalOverlay({ children }) {
+    const { size } = useModalContext();
+    const { overlay } = useModalStyles(size);
+    return (React__default.createElement(AnimatedOverlay, { className: overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-testid": "ATL-Modal-Overlay" }, children));
+}
+function ModalContent({ children }) {
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, } = useModalContext();
+    const { modal } = useModalStyles(size);
+    return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
+        React__default.createElement(FloatingPortal, null,
+            React__default.createElement(AtlantisPortalContent, null,
+                React__default.createElement(ModalOverlay, null,
+                    React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
+                        React__default.createElement(motion.div, { "data-floating-ui-focusable": true, "aria-labelledby": modalLabelledBy, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 0.8 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                                duration: 0.2,
+                                ease: "easeInOut",
+                            }, ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: -1 }, children)))))))));
+}
+
+function Modal(props) {
+    return React__default.createElement(ModalLegacy, Object.assign({}, props));
+}
+Modal.Header = ModalHeader;
+Modal.Actions = ModalActions;
+Modal.Activator = ModalActivator;
+Modal.Provider = ModalProvider;
+Modal.Content = ModalContent;
+
+export { Modal, useModalContext, useModalStyles };

package/dist/Modal/useModal.d.ts

@@ -0,0 +1,35 @@
+interface UseModalProps {
+    open: boolean;
+    activatorRef?: React.RefObject<HTMLElement | null> | null;
+    onRequestClose: () => void;
+}
+export declare function useModal({ open, activatorRef: refProp, onRequestClose, }: UseModalProps): {
+    floatingRefs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    floatingContext: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        update: () => void;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    nodeId: string | undefined;
+    activatorRef: import("react").RefObject<HTMLElement | null>;
+    parentId: string | null;
+};
+export {};

package/dist/Modal/useModalStyles.d.ts

@@ -0,0 +1,10 @@
+import sizes from "./ModalSizes.module.css";
+export declare function useModalStyles(size?: keyof typeof sizes): {
+    modal: string;
+    overlay: string;
+    header: string;
+    dismissButton: string;
+    actionBar: string;
+    leftAction: string;
+    rightAction: string;
+};