@dreamcommerce/aurora 3.1.28 → 3.1.30

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.js

@@ -3,23 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var cn = require('../../../../utilities/cn.js');
-var use_click_outside = require('../../../../hooks/use_click_outside.js');
-var ReactDOM = require('react-dom');
 var modal_constants = require('../../modal_constants.js');
-var modal_footer = require('./modal_footer.js');
-var modal_header = require('./modal_header.js');
-var modal_utils = require('./modal_utils.js');
-var modal_variants = require('../../modal_variants.js');
+var index = require('../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js');
 var use_modals_context = require('../../hooks/use_modals_context.js');
+var modal_content = require('./modal_content.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Modal = function Modal(_ref) {
-  var _header$hasCloseIcon;
   var name = _ref.name,
     hideAllModalsOnClose = _ref.hideAllModalsOnClose,
     _ref$width = _ref.width,
@@ -34,155 +27,45 @@ var Modal = function Modal(_ref) {
     closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton,
     _ref$initiallyVisible = _ref.initiallyVisible,
     initiallyVisible = _ref$initiallyVisible === void 0 ? false : _ref$initiallyVisible;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    visibleClass = _useState2[0],
-    setVisibleClass = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    isScrolledToBottom = _useState4[0],
-    setIsScrolledToBottom = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var scrollTimeoutRef = React.useRef();
-  var contentRef = React.useRef(null);
-  var modalRef = React.useRef(null);
   var isInitializedRef = React.useRef(false);
+  var initiallyVisibleRef = React.useRef(initiallyVisible);
   var _useModalsContext = use_modals_context.useModalsContext(),
-    modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
     addModal = _useModalsContext.addModal,
-    getModal = _useModalsContext.getModal,
+    removeModal = _useModalsContext.removeModal,
     hideModal = _useModalsContext.hideModal,
     showModal = _useModalsContext.showModal,
-    hideAllModals = _useModalsContext.hideAllModals;
-  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
-  var modal = getModal(name);
-  var _useState7 = React.useState(false),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    renderModal = _useState8[0],
-    setRenderModal = _useState8[1];
+    hideAllModals = _useModalsContext.hideAllModals,
+    openModalName = _useModalsContext.openModalName;
   var closeModal = React.useCallback(function () {
     hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
   }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
-  var checkScroll = React.useCallback(function () {
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    var scrollTop = contentElement.scrollTop,
-      scrollHeight = contentElement.scrollHeight,
-      clientHeight = contentElement.clientHeight;
-    var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
-    var hasScrollableContent = scrollHeight > clientHeight;
-    setIsScrolledToBottom(atBottom);
-    setHasScroll(hasScrollableContent);
-  }, []);
-  var handleScroll = React.useCallback(function () {
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-    scrollTimeoutRef.current = setTimeout(checkScroll, 50);
-  }, [checkScroll]);
-  // Handle scroll detection
-  React.useEffect(function () {
-    if (!renderModal || !visibleClass || !children) return;
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    checkScroll();
-    contentElement.addEventListener('scroll', handleScroll);
-    return function () {
-      contentElement.removeEventListener('scroll', handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [renderModal, visibleClass, handleScroll, checkScroll, children]);
   // Initial setup
   React.useEffect(function () {
     if (!isInitializedRef.current) {
-      addModal({
-        name: name,
-        visibilityState: modal_constants.MODAL_VISIBILITY_STATE.none,
-        width: width
-      });
-      if (initiallyVisible) showModal(name);
+      addModal(name);
+      if (initiallyVisibleRef.current) showModal(name);
       isInitializedRef.current = true;
     }
     return function () {
-      return closeModal();
+      return removeModal(name);
     };
-  }, []);
-  // Handle visibility changes
-  React.useEffect(function () {
-    var timeoutId;
-    switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
-      case modal_constants.MODAL_VISIBILITY_STATE.visible:
-        setRenderModal(true);
-        timeoutId = setTimeout(function () {
-          return setVisibleClass(true);
-        }, modal_constants.MODAL_SLIDE_FADE_DURATION);
-        break;
-      case modal_constants.MODAL_VISIBILITY_STATE.hidden:
-        setVisibleClass(false);
-        break;
-      case modal_constants.MODAL_VISIBILITY_STATE.none:
-        setVisibleClass(false);
-        timeoutId = setTimeout(function () {
-          return setRenderModal(false);
-        }, modal_constants.MODAL_SLIDE_FADE_DURATION);
-        break;
-    }
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
-  // Handle keyboard events
-  var handleKeyDown = React.useCallback(function (event) {
-    if (event.key === 'Escape' && closeOnEscButton) {
-      closeModal();
-    }
-  }, [closeOnEscButton, closeModal]);
-  React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown]);
-  // Handle outside click
-  use_click_outside.useClickOutside({
-    refs: [modalRef],
-    callback: function callback() {
-      if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === modal_constants.MODAL_VISIBILITY_STATE.visible) {
-        closeModal();
-      }
-    }
-  });
-  if (!$modalsManagerContainer) return null;
-  return renderModal ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default['default'].createElement("div", {
-    ref: modalRef,
-    "data-modal-id": name,
-    "data-test-id": "modal",
-    className: cn.cn(modal_variants.modalVariants({
-      width: width
-    }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
-  }, header && (/*#__PURE__*/React__default['default'].createElement(modal_header.ModalHeader, {
-    hasCloseIcon: modal_utils.ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
-    onClose: closeModal
-  }, modal_utils.ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React__default['default'].createElement("div", {
-    ref: contentRef,
-    className: cn.cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
-      'aurora-pb-6': footer && hasScroll
-    }),
-    style: {
-      maxHeight: 'calc(100vh - 200px)'
+  }, [name, addModal, removeModal, showModal]);
+  var renderModal = name === openModalName;
+  return /*#__PURE__*/React__default['default'].createElement(index.Root, {
+    open: renderModal,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) closeModal();
     }
-  }, children)), footer && (/*#__PURE__*/React__default['default'].createElement(modal_footer.ModalFooter, {
-    className: cn.cn('', {
-      'aurora-border-t': hasScroll && !isScrolledToBottom
-    })
-  }, footer))), $modalsManagerContainer) : null;
+  }, /*#__PURE__*/React__default['default'].createElement(index.Portal, null, /*#__PURE__*/React__default['default'].createElement(index.Overlay, {
+    className: "data-[state=open]:aurora-animate-modal-backdrop-fade-in data-[state=closed]:aurora-animate-modal-backdrop-fade-out aurora-fixed aurora-inset-0 aurora-z-[999] aurora-bg-inverse aurora-opacity-70 js__modal-mask"
+  }), /*#__PURE__*/React__default['default'].createElement(modal_content.ModalContent, {
+    name: name,
+    width: width,
+    header: header,
+    footer: footer,
+    closeOnOutsideClick: closeOnOutsideClick,
+    closeOnEscButton: closeOnEscButton
+  }, children)));
 };
 
 exports.Modal = Modal;

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wEAA4E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -9,15 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ModalCloseIcon = function ModalCloseIcon(_ref) {
-  var onClose = _ref.onClose;
-  return /*#__PURE__*/React__default['default'].createElement("button", {
-    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
-    onClick: function onClick() {
-      return onClose();
-    },
-    "data-test-id": "close-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(close_line_icon.CloseLineIcon, null));
+var ModalCloseIcon = function ModalCloseIcon() {
+  return /*#__PURE__*/React__default['default'].createElement(close_line_icon.CloseLineIcon, null);
 };
 
 exports.ModalCloseIcon = ModalCloseIcon;

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_close_icon.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_content.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('../../../../utilities/cn.js');
+var modal_constants = require('../../modal_constants.js');
+var index = require('../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js');
+var modal_footer = require('./modal_footer.js');
+var modal_header = require('./modal_header.js');
+var modal_utils = require('./modal_utils.js');
+var modal_variants = require('../../modal_variants.js');
+var use_scroll = require('../../../../hooks/use_scroll.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ModalContent = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
+  var _header$hasCloseIcon;
+  var name = _ref.name,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? modal_constants.MODAL_WIDTH_VARIANT.m : _ref$width,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
+    _ref$closeOnEscButton = _ref.closeOnEscButton,
+    closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton;
+  var contentRef = React.useRef(null);
+  var _useScroll = use_scroll.useScroll(contentRef),
+    atBottom = _useScroll.atBottom,
+    hasScroll = _useScroll.hasScroll;
+  return /*#__PURE__*/React__default['default'].createElement(index.Content, {
+    onEscapeKeyDown: function onEscapeKeyDown(e) {
+      if (!closeOnEscButton) e.preventDefault();
+    },
+    onInteractOutside: function onInteractOutside(e) {
+      if (!closeOnOutsideClick) e.preventDefault();
+    },
+    "data-modal-id": name,
+    "data-test-id": "modal",
+    className: cn.cn(modal_variants.modalVariants({
+      width: width
+    })),
+    ref: ref
+  }, header && (/*#__PURE__*/React__default['default'].createElement(modal_header.ModalHeader, {
+    hasCloseIcon: modal_utils.ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true
+  }, modal_utils.ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React__default['default'].createElement("div", {
+    ref: contentRef,
+    className: cn.cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
+      'aurora-pb-6': footer && hasScroll
+    }),
+    style: {
+      maxHeight: 'calc(100vh - 200px)'
+    }
+  }, children)), footer && (/*#__PURE__*/React__default['default'].createElement(modal_footer.ModalFooter, {
+    className: cn.cn('', {
+      'aurora-border-t': hasScroll && !atBottom
+    })
+  }, footer)));
+});
+ModalContent.displayName = 'ModalContent';
+
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=modal_content.js.map

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wEAA4E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_header.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var index = require('../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js');
 var modal_close_icon = require('./modal_close_icon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,17 +11,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ModalHeader = function ModalHeader(_ref) {
-  var onClose = _ref.onClose,
-    hasCloseIcon = _ref.hasCloseIcon,
+  var hasCloseIcon = _ref.hasCloseIcon,
     children = _ref.children;
   return /*#__PURE__*/React__default['default'].createElement("header", {
     className: 'aurora-flex aurora-items-center aurora-justify-between aurora-pt-6 aurora-pb-5 aurora-px-6 aurora-mb-6 aurora-border-b',
     "data-test-id": "modal-header"
-  }, children ? /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, children ? (/*#__PURE__*/React__default['default'].createElement(index.Title, {
+    asChild: true,
     className: "aurora-font-bold aurora-text-xl"
-  }, children) : null, hasCloseIcon && /*#__PURE__*/React__default['default'].createElement(modal_close_icon.ModalCloseIcon, {
-    onClose: onClose
-  }));
+  }, /*#__PURE__*/React__default['default'].createElement("h3", null, children))) : null, hasCloseIcon && (/*#__PURE__*/React__default['default'].createElement(index.Close, {
+    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
+    "data-test-id": "close-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(modal_close_icon.ModalCloseIcon, null))));
 };
 
 exports.ModalHeader = ModalHeader;

package/build/cjs/packages/aurora/src/components/modal/components/modal/modal_header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wEAA4E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/hooks/use_modals.js

@@ -4,105 +4,55 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var modal_constants = require('../modal_constants.js');
 
 var useModals = function useModals() {
+  var modalsStackRef = React.useRef([]);
   var _useState = React.useState([]),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    modalsStack = _useState2[0],
-    setModalsStack = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    openedModals = _useState4[0],
-    setOpenedModals = _useState4[1];
-  var modalsManagerContainerSelector = "#".concat(modal_constants.MODALS_CONTENT_ID);
-  var addModal = function addModal(modal) {
-    setModalsStack(function (stack) {
-      var modalNameAlreadyExist = stack.some(function (stackModal) {
-        return stackModal.name === modal.name;
-      });
-      if (modalNameAlreadyExist) {
-        return _rollupPluginBabelHelpers.toConsumableArray(stack);
-      } else {
-        return [].concat(_rollupPluginBabelHelpers.toConsumableArray(stack), [modal]);
-      }
-    });
-  };
-  var updateModal = function updateModal(modal) {
-    setModalsStack(function (previousStack) {
-      var updatedStack = previousStack.map(function (stackModal) {
-        return stackModal.name === modal.name ? _rollupPluginBabelHelpers.objectSpread2({}, modal) : stackModal;
-      });
-      return updatedStack;
-    });
-  };
-  var getModal = function getModal(modalName) {
-    return modalsStack.find(function (stackModal) {
-      return stackModal.name === modalName;
-    });
-  };
-  var showModal = function showModal(modalName) {
+    openedModals = _useState2[0],
+    setOpenedModals = _useState2[1];
+  var addModal = React.useCallback(function (modalName) {
+    if (modalsStackRef.current.includes(modalName)) return;
+    modalsStackRef.current = [].concat(_rollupPluginBabelHelpers.toConsumableArray(modalsStackRef.current), [modalName]);
+  }, []);
+  var showModal = React.useCallback(function (modalName) {
+    var first = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!modalsStackRef.current.includes(modalName)) return;
     setOpenedModals(function (modals) {
-      setVisibleState(modals, modal_constants.MODAL_VISIBILITY_STATE.hidden);
+      if (modals.includes(modalName)) return modals;
+      if (first) return [modalName].concat(_rollupPluginBabelHelpers.toConsumableArray(modals));
       return [].concat(_rollupPluginBabelHelpers.toConsumableArray(modals), [modalName]);
     });
-    setVisibleState(modalName, modal_constants.MODAL_VISIBILITY_STATE.visible);
-  };
-  var hideModal = function hideModal(modalName, onCloseAction) {
+  }, []);
+  var hideModal = React.useCallback(function (modalName, onCloseAction) {
     setOpenedModals(function (modals) {
-      var secondToLastItem = modals[modals.length - 2];
-      setVisibleState(secondToLastItem, modal_constants.MODAL_VISIBILITY_STATE.visible);
-      return modals.filter(function (modal) {
-        return modal !== modalName;
+      return modals.filter(function (m) {
+        return m !== modalName;
       });
     });
-    setVisibleState(modalName, modal_constants.MODAL_VISIBILITY_STATE.none);
     onCloseAction && onCloseAction();
-  };
-  var hideAllModals = function hideAllModals(onCloseAction) {
+  }, []);
+  var removeModal = React.useCallback(function (modalName) {
+    modalsStackRef.current = modalsStackRef.current.filter(function (m) {
+      return m !== modalName;
+    });
+    hideModal(modalName);
+  }, [hideModal]);
+  var hideAllModals = React.useCallback(function (onCloseAction) {
     setOpenedModals([]);
-    setVisibleStatesToNone();
     onCloseAction && onCloseAction();
-  };
-  var setVisibleState = function setVisibleState(modalName, state) {
-    if (typeof modalName === 'string') {
-      setModalsStack(function (prevState) {
-        return prevState.map(function (modal) {
-          return modal.name === modalName ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modal), {}, {
-            visibilityState: state
-          }) : modal;
-        });
-      });
-    } else {
-      setModalsStack(function (prevState) {
-        return prevState.map(function (modal) {
-          if (!modalName) return modal;
-          return modalName.includes(modal.name) ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modal), {}, {
-            visibilityState: state
-          }) : modal;
-        });
-      });
-    }
-  };
-  var setVisibleStatesToNone = function setVisibleStatesToNone() {
-    setModalsStack(function (prevState) {
-      return prevState.map(function (modal) {
-        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modal), {}, {
-          visibilityState: modal_constants.MODAL_VISIBILITY_STATE.none
-        });
-      });
-    });
-  };
-  return {
-    modalsManagerContainerSelector: modalsManagerContainerSelector,
-    addModal: addModal,
-    updateModal: updateModal,
-    getModal: getModal,
-    showModal: showModal,
-    hideModal: hideModal,
-    hideAllModals: hideAllModals,
-    openedModals: openedModals
-  };
+  }, []);
+  var openModalName = openedModals[0];
+  return React.useMemo(function () {
+    return {
+      addModal: addModal,
+      removeModal: removeModal,
+      showModal: showModal,
+      hideModal: hideModal,
+      hideAllModals: hideAllModals,
+      openModalName: openModalName
+    };
+  }, [addModal, removeModal, showModal, hideModal, hideAllModals, openModalName]);
 };
 
 exports.default = useModals;

package/build/cjs/packages/aurora/src/components/modal/hooks/use_modals.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/hooks/use_modals_context.js

@@ -7,7 +7,7 @@ var modal_context = require('../modal_context.js');
 
 function useModalsContext() {
   var context = React.useContext(modal_context.ModalsManagerContext);
-  if (Object.keys(context).length === 0 && context.constructor === Object) {
+  if (!context) {
     throw new Error("Modal component cannot be rendered outside the ModalWrapper component");
   }
   return context;

package/build/cjs/packages/aurora/src/components/modal/modal_constants.js

@@ -2,23 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MODALS_CONTENT_ID = 'modals-content';
-var MODALS_WRAPPER_BACKDROP_FADE_DURATION = 300;
-var MODAL_SLIDE_FADE_DURATION = 200;
-var MODAL_VISIBILITY_STATE = {
-  none: 'none',
-  hidden: 'hidden',
-  visible: 'visible'
-};
 var MODAL_WIDTH_VARIANT = {
   s: 's',
   m: 'm',
   l: 'l'
 };
 
-exports.MODALS_CONTENT_ID = MODALS_CONTENT_ID;
-exports.MODALS_WRAPPER_BACKDROP_FADE_DURATION = MODALS_WRAPPER_BACKDROP_FADE_DURATION;
-exports.MODAL_SLIDE_FADE_DURATION = MODAL_SLIDE_FADE_DURATION;
-exports.MODAL_VISIBILITY_STATE = MODAL_VISIBILITY_STATE;
 exports.MODAL_WIDTH_VARIANT = MODAL_WIDTH_VARIANT;
 //# sourceMappingURL=modal_constants.js.map

package/build/cjs/packages/aurora/src/components/modal/modal_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/modal_context.js

@@ -4,18 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-var ModalsManagerContext = /*#__PURE__*/React.createContext({
-  modalsManagerContainerSelector: '',
-  addModal: function addModal() {},
-  updateModal: function updateModal() {},
-  getModal: function getModal() {
-    return undefined;
-  },
-  showModal: function showModal() {},
-  hideModal: function hideModal() {},
-  hideAllModals: function hideAllModals() {},
-  openedModals: []
-});
+var ModalsManagerContext = /*#__PURE__*/React.createContext(null);
 
 exports.ModalsManagerContext = ModalsManagerContext;
 //# sourceMappingURL=modal_context.js.map

package/build/cjs/packages/aurora/src/components/modal/modal_context.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/modal/modal_variants.js

@@ -6,7 +6,7 @@ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBa
 var index = require('../../../../../external/class-variance-authority/dist/index.mjs.js');
 var modal_constants = require('./modal_constants.js');
 
-var modalVariants = index.cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-opacity-0 aurora-transition-all js__modal', {
+var modalVariants = index.cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl data-[state=open]:aurora-animate-modal-slide-in data-[state=closed]:aurora-animate-modal-slide-out aurora-z-[1000] aurora-fixed aurora-top-[50%] aurora-left-[50%] aurora-translate-x-[-50%] aurora-translate-y-[-50%] js__modal', {
   variants: {
     width: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, modal_constants.MODAL_WIDTH_VARIANT.s, 'aurora-max-w-[25rem]'), modal_constants.MODAL_WIDTH_VARIANT.m, 'aurora-max-w-[40rem]'), modal_constants.MODAL_WIDTH_VARIANT.l, 'aurora-max-w-[61rem]')
   },

package/build/cjs/packages/aurora/src/components/modal/modals_manager.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var modal_context = require('./modal_context.js');
-var modals_wrapper = require('./components/modals_wrapper.js');
 var use_modals = require('./hooks/use_modals.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,29 +13,25 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ModalsManager = function ModalsManager(_ref) {
   var children = _ref.children;
   var _useModals = use_modals['default'](),
-    modalsManagerContainerSelector = _useModals.modalsManagerContainerSelector,
     addModal = _useModals.addModal,
-    updateModal = _useModals.updateModal,
-    getModal = _useModals.getModal,
+    removeModal = _useModals.removeModal,
     showModal = _useModals.showModal,
     hideModal = _useModals.hideModal,
     hideAllModals = _useModals.hideAllModals,
-    openedModals = _useModals.openedModals;
+    openModalName = _useModals.openModalName;
   var value = React.useMemo(function () {
     return {
-      modalsManagerContainerSelector: modalsManagerContainerSelector,
       addModal: addModal,
-      updateModal: updateModal,
-      getModal: getModal,
+      removeModal: removeModal,
       showModal: showModal,
       hideModal: hideModal,
       hideAllModals: hideAllModals,
-      openedModals: openedModals
+      openModalName: openModalName
     };
-  }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
+  }, [addModal, removeModal, showModal, hideModal, hideAllModals, openModalName]);
   return /*#__PURE__*/React__default['default'].createElement(modal_context.ModalsManagerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default['default'].createElement(modals_wrapper.ModalsWrapper, null), children);
+  }, children);
 };
 
 exports.ModalsManager = ModalsManager;

package/build/cjs/packages/aurora/src/components/modal/modals_manager.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}