@dreamcommerce/aurora 3.0.0-31 → 3.0.0-33

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

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../../utilities/cn.js';
+import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
+import { ModalFooter } from './modal_footer.js';
+import { ModalHeader } from './modal_header.js';
+import { createPortal } from 'react-dom';
+import { modalVariants } from '../../modal_variants.js';
+import { useModalsContext } from '../../hooks/use_modals_context.js';
+
+var Modal = function Modal(_ref) {
+  var name = _ref.name,
+    hideAllModalsOnClose = _ref.hideAllModalsOnClose,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? MODAL_WIDTH_VARIANT.m : _ref$width,
+    _ref$hasCloseIcon = _ref.hasCloseIcon,
+    hasCloseIcon = _ref$hasCloseIcon === void 0 ? true : _ref$hasCloseIcon,
+    onCloseAction = _ref.onCloseAction,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleClass = _useState2[0],
+    setVisibleClass = _useState2[1];
+  var _useModalsContext = useModalsContext(),
+    modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
+    addModal = _useModalsContext.addModal,
+    getModal = _useModalsContext.getModal,
+    hideModal = _useModalsContext.hideModal,
+    hideAllModals = _useModalsContext.hideAllModals;
+  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
+  var modal = getModal(name);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderModal = _useState4[0],
+    setRenderModal = _useState4[1];
+  useEffect(function () {
+    addModal({
+      name: name,
+      visibilityState: MODAL_VISIBILITY_STATE.none,
+      width: width
+    });
+  }, []);
+  useEffect(function () {
+    var showModalTimeout;
+    var hideModalTimeout;
+    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
+      setRenderModal(true);
+      showModalTimeout = setTimeout(function () {
+        setVisibleClass(true);
+      }, MODAL_SLIDE_FADE_DURATION);
+    }
+    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.hidden) {
+      setVisibleClass(false);
+    }
+    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.none) {
+      setVisibleClass(false);
+      hideModalTimeout = setTimeout(function () {
+        setRenderModal(false);
+      }, MODAL_SLIDE_FADE_DURATION);
+    }
+    return function () {
+      clearTimeout(showModalTimeout);
+      clearTimeout(hideModalTimeout);
+    };
+  }, [modal]);
+  var handleCloseModal = function handleCloseModal() {
+    hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
+  };
+  if (!$modalsManagerContainer) return null;
+  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    "data-modal-id": name,
+    "data-test-id": "modal",
+    className: cn(modalVariants({
+      width: width
+    }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
+  }, header && /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseIcon: hasCloseIcon,
+    text: header.text,
+    onClose: handleCloseModal
+  }), children && /*#__PURE__*/React.createElement("div", {
+    className: "aurora-overflow-y-auto"
+  }, children), footer && /*#__PURE__*/React.createElement(ModalFooter, {
+    text: footer.text
+  })), $modalsManagerContainer) : null;
+};
+
+export { Modal };
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IModalCloseIconProps } from "../../modal_types";
+export declare const ModalCloseIcon: FC<IModalCloseIconProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CloseLine } from '../../../../assets/icons/close_line.js';
+
+var ModalCloseIcon = function ModalCloseIcon(_ref) {
+  var onClose = _ref.onClose;
+  return /*#__PURE__*/React.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.createElement(CloseLine, null));
+};
+
+export { ModalCloseIcon };
+//# sourceMappingURL=modal_close_icon.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IModalFooterProps } from "../../modal_types";
+export declare const ModalFooter: FC<IModalFooterProps>;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+var ModalFooter = function ModalFooter(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/React.createElement("footer", {
+    className: 'aurora-flex aurora-items-center aurora-justify-end aurora-gap-3 aurora-mt-5',
+    "data-test-id": "modal-footer"
+  }, text);
+};
+
+export { ModalFooter };
+//# sourceMappingURL=modal_footer.js.map

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js.map

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

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IModalHeaderProps } from "../../modal_types";
+export declare const ModalHeader: FC<IModalHeaderProps>;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ModalCloseIcon } from './modal_close_icon.js';
+
+var ModalHeader = function ModalHeader(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    onClose = _ref.onClose,
+    hasCloseIcon = _ref.hasCloseIcon;
+  return /*#__PURE__*/React.createElement("header", {
+    className: 'aurora-flex aurora-items-center aurora-justify-between aurora-mb-5',
+    "data-test-id": "modal-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "aurora-font-bold aurora-text-xl"
+  }, text), hasCloseIcon && /*#__PURE__*/React.createElement(ModalCloseIcon, {
+    onClose: onClose
+  }));
+};
+
+export { ModalHeader };
+//# sourceMappingURL=modal_header.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface IModalsWrapperProps {
+    children: ReactNode;
+}
+export declare const ModalsWrapper: React.FC<IModalsWrapperProps>;
+export {};

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
+import { createPortal } from 'react-dom';
+import { useModalsContext } from '../hooks/use_modals_context.js';
+
+var ModalsWrapper = function ModalsWrapper(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showWrapper = _useState2[0],
+    setShowWrapper = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleClass = _useState4[0],
+    setVisibleClass = _useState4[1];
+  var _useModalsContext = useModalsContext(),
+    openedModals = _useModalsContext.openedModals;
+  useEffect(function () {
+    var showWrapperTimeout;
+    if (openedModals.length) {
+      setShowWrapper(true);
+      setVisibleClass(true);
+    } else {
+      setVisibleClass(false);
+      showWrapperTimeout = setTimeout(function () {
+        setShowWrapper(false);
+      }, MODALS_WRAPPER_BACKDROP_FADE_DURATION);
+    }
+    return function () {
+      return clearTimeout(showWrapperTimeout);
+    };
+  }, [openedModals]);
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", null, showWrapper && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-20 aurora-p-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0')
+  }), /*#__PURE__*/React.createElement("div", {
+    id: MODALS_CONTENT_ID,
+    className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
+  }))), children), document.body);
+};
+
+export { ModalsWrapper };
+//# sourceMappingURL=modals_wrapper.js.map

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals.d.ts

@@ -0,0 +1,12 @@
+import { IModal } from '../modal_types';
+declare const useModals: () => {
+    modalsManagerContainerSelector: string;
+    addModal: (modal: IModal) => void;
+    updateModal: (modal: IModal) => void;
+    getModal: (modalName: string) => IModal | undefined;
+    showModal: (modalName: string) => void;
+    hideModal: (modalName: string, onCloseAction: () => void | undefined) => void;
+    hideAllModals: (onCloseAction: () => void | undefined) => void;
+    openedModals: string[];
+};
+export default useModals;

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

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { MODALS_CONTENT_ID, MODAL_VISIBILITY_STATE } from '../modal_constants.js';
+
+var useModals = function useModals() {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalsStack = _useState2[0],
+    setModalsStack = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openedModals = _useState4[0],
+    setOpenedModals = _useState4[1];
+  var modalsManagerContainerSelector = "#".concat(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 _toConsumableArray(stack);
+      } else {
+        return [].concat(_toConsumableArray(stack), [modal]);
+      }
+    });
+  };
+  var updateModal = function updateModal(modal) {
+    setModalsStack(function (previousStack) {
+      var updatedStack = previousStack.map(function (stackModal) {
+        return stackModal.name === modal.name ? _objectSpread2({}, modal) : stackModal;
+      });
+      return updatedStack;
+    });
+  };
+  var getModal = function getModal(modalName) {
+    return modalsStack.find(function (stackModal) {
+      return stackModal.name === modalName;
+    });
+  };
+  var showModal = function showModal(modalName) {
+    setOpenedModals(function (modals) {
+      setVisibleState(modals, MODAL_VISIBILITY_STATE.hidden);
+      return [].concat(_toConsumableArray(modals), [modalName]);
+    });
+    setVisibleState(modalName, MODAL_VISIBILITY_STATE.visible);
+  };
+  var hideModal = function hideModal(modalName, onCloseAction) {
+    setOpenedModals(function (modals) {
+      var secondToLastItem = modals[modals.length - 2];
+      setVisibleState(secondToLastItem, MODAL_VISIBILITY_STATE.visible);
+      return modals.filter(function (modal) {
+        return modal !== modalName;
+      });
+    });
+    setVisibleState(modalName, MODAL_VISIBILITY_STATE.none);
+    onCloseAction && onCloseAction();
+  };
+  var hideAllModals = function hideAllModals(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 ? _objectSpread2(_objectSpread2({}, modal), {}, {
+            visibilityState: state
+          }) : modal;
+        });
+      });
+    } else {
+      setModalsStack(function (prevState) {
+        return prevState.map(function (modal) {
+          if (!modalName) return modal;
+          return modalName.includes(modal.name) ? _objectSpread2(_objectSpread2({}, modal), {}, {
+            visibilityState: state
+          }) : modal;
+        });
+      });
+    }
+  };
+  var setVisibleStatesToNone = function setVisibleStatesToNone() {
+    setModalsStack(function (prevState) {
+      return prevState.map(function (modal) {
+        return _objectSpread2(_objectSpread2({}, modal), {}, {
+          visibilityState: MODAL_VISIBILITY_STATE.none
+        });
+      });
+    });
+  };
+  return {
+    modalsManagerContainerSelector: modalsManagerContainerSelector,
+    addModal: addModal,
+    updateModal: updateModal,
+    getModal: getModal,
+    showModal: showModal,
+    hideModal: hideModal,
+    hideAllModals: hideAllModals,
+    openedModals: openedModals
+  };
+};
+
+export default useModals;
+//# sourceMappingURL=use_modals.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/hooks/use_modals_context.d.ts

@@ -0,0 +1,2 @@
+import { IModalsManagerContextProps } from '../modal_types';
+export declare function useModalsContext(): IModalsManagerContextProps;

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

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ModalsManagerContext } from '../modal_context.js';
+
+function useModalsContext() {
+  var context = useContext(ModalsManagerContext);
+  if (Object.keys(context).length === 0 && context.constructor === Object) {
+    throw new Error("Modal component cannot be rendered outside the ModalWrapper component");
+  }
+  return context;
+}
+
+export { useModalsContext };
+//# sourceMappingURL=use_modals_context.js.map

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

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

package/build/esm/packages/aurora/src/components/modal/modal_constants.d.ts

@@ -0,0 +1,13 @@
+export declare const MODALS_CONTENT_ID = "modals-content";
+export declare const MODALS_WRAPPER_BACKDROP_FADE_DURATION = 300;
+export declare const MODAL_SLIDE_FADE_DURATION = 200;
+export declare const MODAL_VISIBILITY_STATE: {
+    readonly none: "none";
+    readonly hidden: "hidden";
+    readonly visible: "visible";
+};
+export declare const MODAL_WIDTH_VARIANT: {
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+};

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

@@ -0,0 +1,16 @@
+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'
+};
+
+export { MODALS_CONTENT_ID, MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODAL_SLIDE_FADE_DURATION, MODAL_VISIBILITY_STATE, MODAL_WIDTH_VARIANT };
+//# sourceMappingURL=modal_constants.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/modal_context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IModalsManagerContextProps } from './modal_types';
+export declare const ModalsManagerContext: import("react").Context<IModalsManagerContextProps>;

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

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+var ModalsManagerContext = /*#__PURE__*/createContext({
+  modalsManagerContainerSelector: '',
+  addModal: function addModal() {},
+  updateModal: function updateModal() {},
+  getModal: function getModal() {
+    return undefined;
+  },
+  showModal: function showModal() {},
+  hideModal: function hideModal() {},
+  hideAllModals: function hideAllModals() {},
+  openedModals: []
+});
+
+export { ModalsManagerContext };
+//# sourceMappingURL=modal_context.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/modal/modal_types.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { MODAL_VISIBILITY_STATE, MODAL_WIDTH_VARIANT } from './modal_constants';
+export declare type VisibleStates = typeof MODAL_VISIBILITY_STATE[keyof typeof MODAL_VISIBILITY_STATE];
+export interface IModal {
+    name: string;
+    visibilityState: VisibleStates;
+    width: typeof MODAL_WIDTH_VARIANT[keyof typeof MODAL_WIDTH_VARIANT];
+}
+export interface IModalsManagerContextProps {
+    modalsManagerContainerSelector: string;
+    addModal: (modal: IModal) => void;
+    updateModal: (modal: IModal) => void;
+    getModal: (modalName: string) => IModal | undefined;
+    showModal: (modalName: string) => void;
+    hideModal: (modalName: string, onCloseAction?: () => void) => void;
+    hideAllModals: (onCloseAction?: () => void) => void;
+    openedModals: string[];
+}
+export interface IModalNewProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    hideAllModalsOnClose?: boolean;
+    width?: typeof MODAL_WIDTH_VARIANT[keyof typeof MODAL_WIDTH_VARIANT];
+    hasCloseIcon?: boolean;
+    onCloseAction?: () => void;
+    header?: Pick<IModalHeaderProps, 'text'>;
+    footer?: IModalFooterProps;
+    children?: React.ReactNode;
+}
+export interface IModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    text?: string | React.ReactNode;
+    hasCloseIcon?: boolean;
+    onClose: () => void;
+}
+export interface IModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    text: React.ReactNode;
+}
+export interface IModalCloseIconProps extends React.HTMLAttributes<HTMLButtonElement> {
+    onClose: () => void;
+}

package/build/esm/packages/aurora/src/components/modal/modal_types.js

@@ -0,0 +1,3 @@
+import 'react';
+import './modal_constants';
+//# sourceMappingURL=modal_types.js.map

package/build/esm/packages/aurora/src/components/modal/modal_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal_types.js","sourceRoot":"","sources":["../../../../../../../src/components/modal/modal_types.ts"],"names":[],"mappings":"AAAA,OAAuB,OAAO,CAAC;AAE/B,OAA4D,mBAAmB,CAAC"}

package/build/esm/packages/aurora/src/components/modal/modal_variants.d.ts

@@ -0,0 +1,3 @@
+export declare const modalVariants: (props?: ({
+    width?: "s" | "m" | "l" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,15 @@
+import { defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
+import { MODAL_WIDTH_VARIANT } from './modal_constants.js';
+
+var modalVariants = cva('aurora-w-full aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-p-6 aurora-opacity-0 aurora-transition-all', {
+  variants: {
+    width: _defineProperty(_defineProperty(_defineProperty({}, MODAL_WIDTH_VARIANT.s, 'aurora-max-w-[25rem]'), MODAL_WIDTH_VARIANT.m, 'aurora-max-w-[40rem]'), MODAL_WIDTH_VARIANT.l, 'aurora-max-w-[61rem]')
+  },
+  defaultVariants: {
+    width: MODAL_WIDTH_VARIANT.m
+  }
+});
+
+export { modalVariants };
+//# sourceMappingURL=modal_variants.js.map

package/build/esm/packages/aurora/src/components/modal/modal_variants.js.map

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

package/build/esm/packages/aurora/src/components/modal/modals_manager.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface IModalsManagerProps {
+    children: ReactNode;
+}
+export declare const ModalsManager: React.FC<IModalsManagerProps>;
+export {};

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

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { ModalsManagerContext } from './modal_context.js';
+import { ModalsWrapper } from './components/modals_wrapper.js';
+import useModals from './hooks/use_modals.js';
+
+var ModalsManager = function ModalsManager(_ref) {
+  var children = _ref.children;
+  var _useModals = useModals(),
+    modalsManagerContainerSelector = _useModals.modalsManagerContainerSelector,
+    addModal = _useModals.addModal,
+    updateModal = _useModals.updateModal,
+    getModal = _useModals.getModal,
+    showModal = _useModals.showModal,
+    hideModal = _useModals.hideModal,
+    hideAllModals = _useModals.hideAllModals,
+    openedModals = _useModals.openedModals;
+  var value = useMemo(function () {
+    return {
+      modalsManagerContainerSelector: modalsManagerContainerSelector,
+      addModal: addModal,
+      updateModal: updateModal,
+      getModal: getModal,
+      showModal: showModal,
+      hideModal: hideModal,
+      hideAllModals: hideAllModals,
+      openedModals: openedModals
+    };
+  }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
+  return /*#__PURE__*/React.createElement(ModalsManagerContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(ModalsWrapper, null, children));
+};
+
+export { ModalsManager };
+//# sourceMappingURL=modals_manager.js.map

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

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/stack/stack.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare const Stack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     direction?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-    justifyContent?: "start" | "end" | "center" | "stretch" | "normal" | "between" | "around" | "evenly" | undefined;
-    alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    justify?: "start" | "end" | "center" | "stretch" | "normal" | "between" | "around" | "evenly" | undefined;
+    align?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
     spacing?: "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "90" | undefined;
     wrap?: string | undefined;
     children?: React.ReactNode;

package/build/esm/packages/aurora/src/components/stack/stack.js

@@ -4,13 +4,13 @@ import { STACK_DIRECTION_TYPES, STACK_WRAP_TYPES, STACK_ALIGN_ITEMS_TYPES, STACK
 import { cn } from '../../utilities/cn.js';
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 
-var _excluded = ["children", "spacing", "className", "direction", "justifyContent", "alignItems", "wrap", "as", "inline", "attributes", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "style"];
+var _excluded = ["children", "spacing", "className", "direction", "justify", "align", "wrap", "as", "inline", "attributes", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "style"];
 var stackVariants = cva('aurora-flex', {
   variants: {
     direction: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, STACK_DIRECTION_TYPES.row, 'aurora-flex-row'), STACK_DIRECTION_TYPES.column, 'aurora-flex-col'), STACK_DIRECTION_TYPES.rowReverse, 'aurora-flex-row-reverse'), STACK_DIRECTION_TYPES.columnReverse, 'aurora-flex-col-reverse'),
     wrap: _defineProperty(_defineProperty(_defineProperty({}, STACK_WRAP_TYPES.wrap, 'aurora-flex-wrap'), STACK_WRAP_TYPES.nowrap, 'aurora-flex-nowrap'), STACK_WRAP_TYPES.wrapReverse, 'aurora-flex-wrap-reverse'),
-    alignItems: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, STACK_ALIGN_ITEMS_TYPES.start, 'aurora-items-start'), STACK_ALIGN_ITEMS_TYPES.end, 'aurora-items-end'), STACK_ALIGN_ITEMS_TYPES.center, 'aurora-items-center'), STACK_ALIGN_ITEMS_TYPES.baseline, 'aurora-items-baseline'), STACK_ALIGN_ITEMS_TYPES.stretch, 'aurora-items-stretch'),
-    justifyContent: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, STACK_JUSTIFY_CONTENT_TYPES.normal, 'aurora-justify-normal'), STACK_JUSTIFY_CONTENT_TYPES.start, 'aurora-justify-start'), STACK_JUSTIFY_CONTENT_TYPES.end, 'aurora-justify-end'), STACK_JUSTIFY_CONTENT_TYPES.center, 'aurora-justify-center'), STACK_JUSTIFY_CONTENT_TYPES.between, 'aurora-justify-between'), STACK_JUSTIFY_CONTENT_TYPES.around, 'aurora-justify-around'), STACK_JUSTIFY_CONTENT_TYPES.evenly, 'aurora-justify-evenly'), STACK_JUSTIFY_CONTENT_TYPES.stretch, 'aurora-justify-stretch'),
+    align: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, STACK_ALIGN_ITEMS_TYPES.start, 'aurora-items-start'), STACK_ALIGN_ITEMS_TYPES.end, 'aurora-items-end'), STACK_ALIGN_ITEMS_TYPES.center, 'aurora-items-center'), STACK_ALIGN_ITEMS_TYPES.baseline, 'aurora-items-baseline'), STACK_ALIGN_ITEMS_TYPES.stretch, 'aurora-items-stretch'),
+    justify: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, STACK_JUSTIFY_CONTENT_TYPES.normal, 'aurora-justify-normal'), STACK_JUSTIFY_CONTENT_TYPES.start, 'aurora-justify-start'), STACK_JUSTIFY_CONTENT_TYPES.end, 'aurora-justify-end'), STACK_JUSTIFY_CONTENT_TYPES.center, 'aurora-justify-center'), STACK_JUSTIFY_CONTENT_TYPES.between, 'aurora-justify-between'), STACK_JUSTIFY_CONTENT_TYPES.around, 'aurora-justify-around'), STACK_JUSTIFY_CONTENT_TYPES.evenly, 'aurora-justify-evenly'), STACK_JUSTIFY_CONTENT_TYPES.stretch, 'aurora-justify-stretch'),
     display: {
       inline: 'aurora-inline-flex'
     }
@@ -22,10 +22,10 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? STACK_DIRECTION_TYPES.row : _ref$direction,
-    _ref$justifyContent = _ref.justifyContent,
-    justifyContent = _ref$justifyContent === void 0 ? STACK_JUSTIFY_CONTENT_TYPES.start : _ref$justifyContent,
-    _ref$alignItems = _ref.alignItems,
-    alignItems = _ref$alignItems === void 0 ? STACK_ALIGN_ITEMS_TYPES.start : _ref$alignItems,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? STACK_JUSTIFY_CONTENT_TYPES.start : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? STACK_ALIGN_ITEMS_TYPES.start : _ref$align,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? STACK_WRAP_TYPES.nowrap : _ref$wrap,
     _ref$as = _ref.as,
@@ -60,8 +60,8 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: internalRef,
     className: cn(stackVariants({
       direction: direction,
-      justifyContent: justifyContent,
-      alignItems: alignItems,
+      justify: justify,
+      align: align,
       wrap: wrap,
       display: display
     }), className, _defineProperty({}, "aurora-gap-".concat(spacing), !!spacing)),

package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts

@@ -4,8 +4,8 @@ import { STACK_ALIGN_ITEMS_TYPES, STACK_DIRECTION_TYPES, STACK_JUSTIFY_CONTENT_T
 import { TCssSpacingTokens } from "../../constants/css_tokens/css_tokens_types";
 export declare type TStackProps = React.HTMLAttributes<HTMLElement> & {
     direction?: TStackDirection;
-    justifyContent?: TStackJustifyContent;
-    alignItems?: TStackAlign;
+    justify?: TStackJustifyContent;
+    align?: TStackAlign;
     spacing?: TCssSpacingTokens;
     wrap?: TStackWrap;
     children?: React.ReactNode;