@infomaximum/ui-kit 0.9.1

package/dist/components/Message/components/Message/Message.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { CLOSE_MESSAGE_DURATION, convertSecondsToMilliseconds, getIconByType } from "./Message.utils.js";
+import { CloseOutlined } from "@infomaximum/icons";
+import { getMessageStyle } from "./Message.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const Message = ({
+  content,
+  icon,
+  type,
+  placement = "bottomRight",
+  closable,
+  duration = 3,
+  rtl,
+  className,
+  styles,
+  onClick,
+  onClose
+}) => {
+  var _a, _b, _c, _d;
+  const theme = useTheme();
+  const [isCloseAnimation, setIsCloseAnimation] = useState(false);
+  const closeMessage = useCallback(() => {
+    setTimeout(() => {
+      setIsCloseAnimation(true);
+      setTimeout(() => {
+        onClose == null ? void 0 : onClose();
+      }, CLOSE_MESSAGE_DURATION);
+    });
+  }, [onClose]);
+  useEffect(() => {
+    const timerId = setTimeout(closeMessage, convertSecondsToMilliseconds(duration));
+    return () => clearTimeout(timerId);
+  }, [closeMessage, duration]);
+  const closeHandle = useCallback(() => {
+    closeMessage();
+  }, [closeMessage]);
+  const currentIcon = icon ?? getIconByType(type);
+  const messageStyle = getMessageStyle(type, isCloseAnimation, placement);
+  const dir = rtl ? "rtl" : void 0;
+  return /* @__PURE__ */ jsxs("span", { css: [messageStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:Message;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0RNIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBNZXNzYWdlUHJvcHMgfSBmcm9tIFwiLi9NZXNzYWdlLnR5cGVzXCI7XG5pbXBvcnQge1xuICBDTE9TRV9NRVNTQUdFX0RVUkFUSU9OLFxuICBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzLFxuICBnZXRJY29uQnlUeXBlLFxufSBmcm9tIFwiLi9NZXNzYWdlLnV0aWxzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0TWVzc2FnZVN0eWxlIH0gZnJvbSBcIi4vTWVzc2FnZS5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5cbmV4cG9ydCBjb25zdCBNZXNzYWdlOiBGQzxNZXNzYWdlUHJvcHM+ID0gKHtcbiAgY29udGVudCxcbiAgaWNvbixcbiAgdHlwZSxcbiAgcGxhY2VtZW50ID0gXCJib3R0b21SaWdodFwiLFxuICBjbG9zYWJsZSxcbiAgZHVyYXRpb24gPSAzLFxuICBydGwsXG4gIGNsYXNzTmFtZSxcbiAgc3R5bGVzLFxuICBvbkNsaWNrLFxuICBvbkNsb3NlLFxufSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgY29uc3QgW2lzQ2xvc2VBbmltYXRpb24sIHNldElzQ2xvc2VBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGNsb3NlTWVzc2FnZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHNldElzQ2xvc2VBbmltYXRpb24odHJ1ZSk7XG5cbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oKTtcbiAgICAgIH0sIENMT1NFX01FU1NBR0VfRFVSQVRJT04pO1xuICAgIH0pO1xuICB9LCBbb25DbG9zZV0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdGltZXJJZCA9IHNldFRpbWVvdXQoY2xvc2VNZXNzYWdlLCBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzKGR1cmF0aW9uKSk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVySWQpO1xuICB9LCBbY2xvc2VNZXNzYWdlLCBkdXJhdGlvbl0pO1xuXG4gIGNvbnN0IGNsb3NlSGFuZGxlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNsb3NlTWVzc2FnZSgpO1xuICB9LCBbY2xvc2VNZXNzYWdlXSk7XG5cbiAgY29uc3QgY3VycmVudEljb24gPSBpY29uID8/IGdldEljb25CeVR5cGUodHlwZSk7XG5cbiAgY29uc3QgbWVzc2FnZVN0eWxlID0gZ2V0TWVzc2FnZVN0eWxlKHR5cGUsIGlzQ2xvc2VBbmltYXRpb24sIHBsYWNlbWVudCk7XG5cbiAgY29uc3QgZGlyID0gcnRsID8gXCJydGxcIiA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxzcGFuXG4gICAgICBjc3M9e1ttZXNzYWdlU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBkaXI9e2Rpcn1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1ttZXNzYWdlU3R5bGUuaWNvbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/Lmljb25XcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgIHtjdXJyZW50SWNvbn1cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNzcz17W21lc3NhZ2VTdHlsZS5jb250ZW50V3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY29udGVudFdyYXBwZXI/Lih0aGVtZSldfSBkaXI9e2Rpcn0+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9zcGFuPlxuICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjc3M9e1ttZXNzYWdlU3R5bGUuY2xvc2VJY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uV3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgICAgb25DbGljaz17Y2xvc2VIYW5kbGV9XG4gICAgICAgID5cbiAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvc3Bhbj5cbiAgKTtcbn07XG4iXX0= */"], className, onClick, dir, children: [
+    /* @__PURE__ */ jsx("span", { css: [messageStyle.iconWrapper(theme), (_b = styles == null ? void 0 : styles.iconWrapper) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:Message;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkRZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBNZXNzYWdlUHJvcHMgfSBmcm9tIFwiLi9NZXNzYWdlLnR5cGVzXCI7XG5pbXBvcnQge1xuICBDTE9TRV9NRVNTQUdFX0RVUkFUSU9OLFxuICBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzLFxuICBnZXRJY29uQnlUeXBlLFxufSBmcm9tIFwiLi9NZXNzYWdlLnV0aWxzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0TWVzc2FnZVN0eWxlIH0gZnJvbSBcIi4vTWVzc2FnZS5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5cbmV4cG9ydCBjb25zdCBNZXNzYWdlOiBGQzxNZXNzYWdlUHJvcHM+ID0gKHtcbiAgY29udGVudCxcbiAgaWNvbixcbiAgdHlwZSxcbiAgcGxhY2VtZW50ID0gXCJib3R0b21SaWdodFwiLFxuICBjbG9zYWJsZSxcbiAgZHVyYXRpb24gPSAzLFxuICBydGwsXG4gIGNsYXNzTmFtZSxcbiAgc3R5bGVzLFxuICBvbkNsaWNrLFxuICBvbkNsb3NlLFxufSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgY29uc3QgW2lzQ2xvc2VBbmltYXRpb24sIHNldElzQ2xvc2VBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGNsb3NlTWVzc2FnZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHNldElzQ2xvc2VBbmltYXRpb24odHJ1ZSk7XG5cbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oKTtcbiAgICAgIH0sIENMT1NFX01FU1NBR0VfRFVSQVRJT04pO1xuICAgIH0pO1xuICB9LCBbb25DbG9zZV0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdGltZXJJZCA9IHNldFRpbWVvdXQoY2xvc2VNZXNzYWdlLCBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzKGR1cmF0aW9uKSk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVySWQpO1xuICB9LCBbY2xvc2VNZXNzYWdlLCBkdXJhdGlvbl0pO1xuXG4gIGNvbnN0IGNsb3NlSGFuZGxlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNsb3NlTWVzc2FnZSgpO1xuICB9LCBbY2xvc2VNZXNzYWdlXSk7XG5cbiAgY29uc3QgY3VycmVudEljb24gPSBpY29uID8/IGdldEljb25CeVR5cGUodHlwZSk7XG5cbiAgY29uc3QgbWVzc2FnZVN0eWxlID0gZ2V0TWVzc2FnZVN0eWxlKHR5cGUsIGlzQ2xvc2VBbmltYXRpb24sIHBsYWNlbWVudCk7XG5cbiAgY29uc3QgZGlyID0gcnRsID8gXCJydGxcIiA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxzcGFuXG4gICAgICBjc3M9e1ttZXNzYWdlU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBkaXI9e2Rpcn1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1ttZXNzYWdlU3R5bGUuaWNvbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/Lmljb25XcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgIHtjdXJyZW50SWNvbn1cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNzcz17W21lc3NhZ2VTdHlsZS5jb250ZW50V3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY29udGVudFdyYXBwZXI/Lih0aGVtZSldfSBkaXI9e2Rpcn0+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9zcGFuPlxuICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjc3M9e1ttZXNzYWdlU3R5bGUuY2xvc2VJY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uV3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgICAgb25DbGljaz17Y2xvc2VIYW5kbGV9XG4gICAgICAgID5cbiAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvc3Bhbj5cbiAgKTtcbn07XG4iXX0= */"], children: currentIcon }),
+    /* @__PURE__ */ jsx("span", { css: [messageStyle.contentWrapper(theme), (_c = styles == null ? void 0 : styles.contentWrapper) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:Message;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0VZIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBNZXNzYWdlUHJvcHMgfSBmcm9tIFwiLi9NZXNzYWdlLnR5cGVzXCI7XG5pbXBvcnQge1xuICBDTE9TRV9NRVNTQUdFX0RVUkFUSU9OLFxuICBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzLFxuICBnZXRJY29uQnlUeXBlLFxufSBmcm9tIFwiLi9NZXNzYWdlLnV0aWxzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0TWVzc2FnZVN0eWxlIH0gZnJvbSBcIi4vTWVzc2FnZS5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5cbmV4cG9ydCBjb25zdCBNZXNzYWdlOiBGQzxNZXNzYWdlUHJvcHM+ID0gKHtcbiAgY29udGVudCxcbiAgaWNvbixcbiAgdHlwZSxcbiAgcGxhY2VtZW50ID0gXCJib3R0b21SaWdodFwiLFxuICBjbG9zYWJsZSxcbiAgZHVyYXRpb24gPSAzLFxuICBydGwsXG4gIGNsYXNzTmFtZSxcbiAgc3R5bGVzLFxuICBvbkNsaWNrLFxuICBvbkNsb3NlLFxufSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgY29uc3QgW2lzQ2xvc2VBbmltYXRpb24sIHNldElzQ2xvc2VBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGNsb3NlTWVzc2FnZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHNldElzQ2xvc2VBbmltYXRpb24odHJ1ZSk7XG5cbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oKTtcbiAgICAgIH0sIENMT1NFX01FU1NBR0VfRFVSQVRJT04pO1xuICAgIH0pO1xuICB9LCBbb25DbG9zZV0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdGltZXJJZCA9IHNldFRpbWVvdXQoY2xvc2VNZXNzYWdlLCBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzKGR1cmF0aW9uKSk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVySWQpO1xuICB9LCBbY2xvc2VNZXNzYWdlLCBkdXJhdGlvbl0pO1xuXG4gIGNvbnN0IGNsb3NlSGFuZGxlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNsb3NlTWVzc2FnZSgpO1xuICB9LCBbY2xvc2VNZXNzYWdlXSk7XG5cbiAgY29uc3QgY3VycmVudEljb24gPSBpY29uID8/IGdldEljb25CeVR5cGUodHlwZSk7XG5cbiAgY29uc3QgbWVzc2FnZVN0eWxlID0gZ2V0TWVzc2FnZVN0eWxlKHR5cGUsIGlzQ2xvc2VBbmltYXRpb24sIHBsYWNlbWVudCk7XG5cbiAgY29uc3QgZGlyID0gcnRsID8gXCJydGxcIiA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxzcGFuXG4gICAgICBjc3M9e1ttZXNzYWdlU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBkaXI9e2Rpcn1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1ttZXNzYWdlU3R5bGUuaWNvbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/Lmljb25XcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgIHtjdXJyZW50SWNvbn1cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNzcz17W21lc3NhZ2VTdHlsZS5jb250ZW50V3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY29udGVudFdyYXBwZXI/Lih0aGVtZSldfSBkaXI9e2Rpcn0+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9zcGFuPlxuICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjc3M9e1ttZXNzYWdlU3R5bGUuY2xvc2VJY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uV3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgICAgb25DbGljaz17Y2xvc2VIYW5kbGV9XG4gICAgICAgID5cbiAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvc3Bhbj5cbiAgKTtcbn07XG4iXX0= */"], dir, children: content }),
+    closable && /* @__PURE__ */ jsx("span", { css: [messageStyle.closeIconWrapper(theme), (_d = styles == null ? void 0 : styles.closeIconWrapper) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:Message;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUVVIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTWVzc2FnZS9jb21wb25lbnRzL01lc3NhZ2UvTWVzc2FnZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBNZXNzYWdlUHJvcHMgfSBmcm9tIFwiLi9NZXNzYWdlLnR5cGVzXCI7XG5pbXBvcnQge1xuICBDTE9TRV9NRVNTQUdFX0RVUkFUSU9OLFxuICBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzLFxuICBnZXRJY29uQnlUeXBlLFxufSBmcm9tIFwiLi9NZXNzYWdlLnV0aWxzXCI7XG5pbXBvcnQgeyBDbG9zZU91dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0TWVzc2FnZVN0eWxlIH0gZnJvbSBcIi4vTWVzc2FnZS5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5cbmV4cG9ydCBjb25zdCBNZXNzYWdlOiBGQzxNZXNzYWdlUHJvcHM+ID0gKHtcbiAgY29udGVudCxcbiAgaWNvbixcbiAgdHlwZSxcbiAgcGxhY2VtZW50ID0gXCJib3R0b21SaWdodFwiLFxuICBjbG9zYWJsZSxcbiAgZHVyYXRpb24gPSAzLFxuICBydGwsXG4gIGNsYXNzTmFtZSxcbiAgc3R5bGVzLFxuICBvbkNsaWNrLFxuICBvbkNsb3NlLFxufSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgY29uc3QgW2lzQ2xvc2VBbmltYXRpb24sIHNldElzQ2xvc2VBbmltYXRpb25dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGNsb3NlTWVzc2FnZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHNldElzQ2xvc2VBbmltYXRpb24odHJ1ZSk7XG5cbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBvbkNsb3NlPy4oKTtcbiAgICAgIH0sIENMT1NFX01FU1NBR0VfRFVSQVRJT04pO1xuICAgIH0pO1xuICB9LCBbb25DbG9zZV0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdGltZXJJZCA9IHNldFRpbWVvdXQoY2xvc2VNZXNzYWdlLCBjb252ZXJ0U2Vjb25kc1RvTWlsbGlzZWNvbmRzKGR1cmF0aW9uKSk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KHRpbWVySWQpO1xuICB9LCBbY2xvc2VNZXNzYWdlLCBkdXJhdGlvbl0pO1xuXG4gIGNvbnN0IGNsb3NlSGFuZGxlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNsb3NlTWVzc2FnZSgpO1xuICB9LCBbY2xvc2VNZXNzYWdlXSk7XG5cbiAgY29uc3QgY3VycmVudEljb24gPSBpY29uID8/IGdldEljb25CeVR5cGUodHlwZSk7XG5cbiAgY29uc3QgbWVzc2FnZVN0eWxlID0gZ2V0TWVzc2FnZVN0eWxlKHR5cGUsIGlzQ2xvc2VBbmltYXRpb24sIHBsYWNlbWVudCk7XG5cbiAgY29uc3QgZGlyID0gcnRsID8gXCJydGxcIiA6IHVuZGVmaW5lZDtcblxuICByZXR1cm4gKFxuICAgIDxzcGFuXG4gICAgICBjc3M9e1ttZXNzYWdlU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBkaXI9e2Rpcn1cbiAgICA+XG4gICAgICA8c3BhbiBjc3M9e1ttZXNzYWdlU3R5bGUuaWNvbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/Lmljb25XcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgIHtjdXJyZW50SWNvbn1cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNzcz17W21lc3NhZ2VTdHlsZS5jb250ZW50V3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY29udGVudFdyYXBwZXI/Lih0aGVtZSldfSBkaXI9e2Rpcn0+XG4gICAgICAgIHtjb250ZW50fVxuICAgICAgPC9zcGFuPlxuICAgICAge2Nsb3NhYmxlICYmIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjc3M9e1ttZXNzYWdlU3R5bGUuY2xvc2VJY29uV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY2xvc2VJY29uV3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgICAgb25DbGljaz17Y2xvc2VIYW5kbGV9XG4gICAgICAgID5cbiAgICAgICAgICA8Q2xvc2VPdXRsaW5lZCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICApfVxuICAgIDwvc3Bhbj5cbiAgKTtcbn07XG4iXX0= */"], onClick: closeHandle, children: /* @__PURE__ */ jsx(CloseOutlined, {}) })
+  ] });
+};
+export {
+  Message
+};

package/dist/components/Message/components/Message/Message.styles.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from 'themes';
+import { MessagePlacement, MessageType } from 'components/Message/message.types';
+export declare const getMessageStyle: (type: MessageType, isCloseAnimation: boolean, placement: MessagePlacement) => {
+    wrapper: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        maxWidth: number;
+        padding: string;
+        borderRadius: 8;
+        gap: 8;
+        background: "#FFFFFF";
+        boxShadow: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+        animationName: {
+            name: string;
+            styles: string;
+            anim: 1;
+            toString: () => string;
+        } & string;
+        animationDuration: string;
+        animationIterationCount: number;
+        animationTimingFunction: string;
+    };
+    iconWrapper: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        fontSize: 16;
+        color: "#1677FF" | "#52C41A" | "#FA8C16" | "#FF4D4F" | "#0CB3B3";
+    };
+    contentWrapper: (theme: Theme) => {
+        color: "#262626";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+    };
+    closeIconWrapper: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        fontSize: 12;
+        color: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        cursor: string;
+        ":hover": {
+            color: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        };
+    };
+};

package/dist/components/Message/components/Message/Message.styles.js

@@ -0,0 +1,93 @@
+import { getMessageTokens } from "./Message.tokens.js";
+import { keyframes } from "@emotion/react";
+import { MESSAGE_ANIMATION_DURATION } from "./Message.utils.js";
+const getIconColor = (theme, type) => {
+  switch (type) {
+    case "success":
+      return theme.positiveBase;
+    case "info":
+      return theme.infoBase;
+    case "warning":
+      return theme.warningBase;
+    case "error":
+      return theme.dangerBase;
+    default:
+      return theme.primaryBase;
+  }
+};
+const messageMoveIn = (isBottomSide) => keyframes`
+  0% {
+    transform: translate(0px, ${isBottomSide ? 24 : -24}px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0px, 0px);
+    opacity: 1;
+  }
+`;
+const messageMoveOut = (isBottomSide) => keyframes`
+  0% {
+    transform: translate(0px, 0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0px, ${isBottomSide ? 24 : -24}px);
+    opacity: 0;
+  }
+`;
+const getAnimationName = (isCloseAnimation, placement) => {
+  const isBottomSide = ["bottom", "bottomRight", "bottomLeft"].includes(placement);
+  if (isCloseAnimation) {
+    return messageMoveOut(isBottomSide);
+  }
+  return messageMoveIn(isBottomSide);
+};
+const getMessageStyle = (type, isCloseAnimation, placement) => {
+  return {
+    wrapper: (theme) => {
+      const messageTokens = getMessageTokens(theme);
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        maxWidth: messageTokens.messageMaxWidth,
+        padding: `${messageTokens.messagePaddingVertical}px ${messageTokens.messagePaddingHorizontal}px`,
+        borderRadius: theme.borderRadiusL,
+        gap: theme.marginM,
+        background: theme.bgFloat,
+        boxShadow: theme.shadow2,
+        animationName: getAnimationName(isCloseAnimation, placement),
+        animationDuration: `${MESSAGE_ANIMATION_DURATION}ms`,
+        animationIterationCount: 1,
+        animationTimingFunction: "linear"
+      };
+    },
+    iconWrapper: (theme) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: theme.iconM,
+      color: getIconColor(theme, type)
+    }),
+    contentWrapper: (theme) => {
+      const messageTokens = getMessageTokens(theme);
+      return {
+        ...theme.typography.body2,
+        color: messageTokens.messageText
+      };
+    },
+    closeIconWrapper: (theme) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: theme.iconS,
+      color: theme.textIcon,
+      cursor: "pointer",
+      ":hover": {
+        color: theme.textIconHover
+      }
+    })
+  };
+};
+export {
+  getMessageStyle
+};

package/dist/components/Message/components/Message/Message.tokens.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from 'themes';
+export declare const getMessageTokens: (theme: Theme) => {
+    messageText: "#262626";
+    messagePaddingVertical: 8;
+    messagePaddingHorizontal: 12;
+    messageMaxWidth: number;
+    messageZIndexPopup: number;
+};

package/dist/components/Message/components/Message/Message.tokens.js

@@ -0,0 +1,10 @@
+const getMessageTokens = (theme) => ({
+  messageText: theme.textPrimary,
+  messagePaddingVertical: theme.x2,
+  messagePaddingHorizontal: theme.x3,
+  messageMaxWidth: 448,
+  messageZIndexPopup: 2010
+});
+export {
+  getMessageTokens
+};

package/dist/components/Message/components/Message/Message.types.d.ts

@@ -0,0 +1,22 @@
+import { Interpolation } from '@emotion/react';
+import { MessagePlacement, MessageType } from '../../message.types';
+import { MouseEvent, ReactNode } from 'react';
+import { Theme } from '../../../../themes';
+export interface MessageProps {
+    type: MessageType;
+    placement?: MessagePlacement;
+    content: ReactNode;
+    duration?: number;
+    closable?: boolean;
+    icon?: ReactNode;
+    rtl?: boolean;
+    className?: string;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        iconWrapper?: (theme: Theme) => Interpolation;
+        contentWrapper?: (theme: Theme) => Interpolation;
+        closeIconWrapper?: (theme: Theme) => Interpolation;
+    };
+    onClick?: (e: MouseEvent) => void;
+    onClose?: () => void;
+}

package/dist/components/Message/components/Message/Message.utils.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { MessageType } from 'components/Message/message.types';
+export declare const MESSAGE_ANIMATION_DURATION = 150;
+export declare const CLOSE_MESSAGE_DURATION: number;
+export declare const getIconByType: (type: MessageType) => ReactNode;
+export declare const convertSecondsToMilliseconds: (seconds: number) => number;

package/dist/components/Message/components/Message/Message.utils.js

@@ -0,0 +1,22 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { CheckCircleFilled, InfoCircleFilled, ExclamationCircleFilled, CloseCircleFilled } from "@infomaximum/icons";
+import { LoadingOutlined } from "../../../../icons/icons/LoadingOutlined.js";
+const MESSAGE_ANIMATION_DURATION = 150;
+const CLOSE_MESSAGE_DURATION = MESSAGE_ANIMATION_DURATION - 30;
+const icons = {
+  success: /* @__PURE__ */ jsx(CheckCircleFilled, {}),
+  info: /* @__PURE__ */ jsx(InfoCircleFilled, {}),
+  warning: /* @__PURE__ */ jsx(ExclamationCircleFilled, {}),
+  error: /* @__PURE__ */ jsx(CloseCircleFilled, {}),
+  loading: /* @__PURE__ */ jsx(LoadingOutlined, {})
+};
+const getIconByType = (type) => {
+  return icons[type];
+};
+const convertSecondsToMilliseconds = (seconds) => seconds * 1e3;
+export {
+  CLOSE_MESSAGE_DURATION,
+  MESSAGE_ANIMATION_DURATION,
+  convertSecondsToMilliseconds,
+  getIconByType
+};

package/dist/components/Message/components/MessageList/MessageList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MessageListProps } from './MessageList.types';
+export declare const MessageList: FC<MessageListProps>;

package/dist/components/Message/components/MessageList/MessageList.js

@@ -0,0 +1,13 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { getMessageListStyle } from "./MessageList.styles.js";
+const MessageList = memo(({
+  placement,
+  config,
+  messages
+}) => {
+  return /* @__PURE__ */ jsx("div", { css: getMessageListStyle(placement, config), children: messages.map((item) => item.content) });
+});
+export {
+  MessageList
+};

package/dist/components/Message/components/MessageList/MessageList.styles.d.ts

@@ -0,0 +1,70 @@
+import { ConfigType, MessagePlacement } from 'components/Message/message.types';
+export declare const getMessageListStyle: (placement: MessagePlacement, config: ConfigType) => {
+    readonly top: number;
+    readonly gap: number;
+    readonly flexDirection: "column";
+    readonly left: number;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+} | {
+    readonly top: number;
+    readonly gap: number;
+    readonly flexDirection: "column";
+    readonly left: string;
+    readonly transform: string;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+} | {
+    readonly top: number;
+    readonly gap: number;
+    readonly flexDirection: "column";
+    readonly right: number;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+} | {
+    readonly bottom: number;
+    readonly gap: number;
+    readonly flexDirection: "column-reverse";
+    readonly left: number;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+} | {
+    readonly bottom: number;
+    readonly gap: number;
+    readonly flexDirection: "column-reverse";
+    readonly left: string;
+    readonly transform: string;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+} | {
+    readonly bottom: number;
+    readonly gap: number;
+    readonly flexDirection: "column-reverse";
+    readonly right: number;
+    readonly alignItems: string;
+    readonly display: "flex";
+    readonly position: "fixed";
+    readonly padding: `0 ${number}px`;
+    readonly boxSizing: "border-box";
+    readonly zIndex: number | undefined;
+};

package/dist/components/Message/components/MessageList/MessageList.styles.js

@@ -0,0 +1,63 @@
+const getPlacementStyles = (placement, config) => {
+  const topSpace = {
+    top: config.top ?? 0,
+    gap: config.top ?? 0,
+    flexDirection: "column"
+  };
+  const bottomSpace = {
+    bottom: config.top ?? 0,
+    gap: config.top ?? 0,
+    flexDirection: "column-reverse"
+  };
+  switch (placement) {
+    case "topLeft":
+      return {
+        left: 0,
+        alignItems: "flex-start",
+        ...topSpace
+      };
+    case "top":
+      return {
+        left: "50%",
+        transform: "translate(-50%, 0)",
+        alignItems: "center",
+        ...topSpace
+      };
+    case "topRight":
+      return {
+        right: 0,
+        alignItems: "flex-end",
+        ...topSpace
+      };
+    case "bottomLeft":
+      return {
+        left: 0,
+        alignItems: "flex-start",
+        ...bottomSpace
+      };
+    case "bottom":
+      return {
+        left: "50%",
+        transform: "translate(-50%, 0)",
+        alignItems: "center",
+        ...bottomSpace
+      };
+    case "bottomRight":
+      return {
+        right: 0,
+        alignItems: "flex-end",
+        ...bottomSpace
+      };
+  }
+};
+const getMessageListStyle = (placement, config) => ({
+  display: "flex",
+  position: "fixed",
+  padding: `0 ${config.top ?? 0}px`,
+  boxSizing: "border-box",
+  zIndex: config.zIndex,
+  ...getPlacementStyles(placement, config)
+});
+export {
+  getMessageListStyle
+};

package/dist/components/Message/components/MessageList/MessageList.types.d.ts

@@ -0,0 +1,6 @@
+import { ConfigType, MessagePlacement, MessageQueueItem } from 'components/Message/message.types';
+export interface MessageListProps {
+    placement: MessagePlacement;
+    config: ConfigType;
+    messages: MessageQueueItem[];
+}

package/dist/components/Message/components/MessagesHolder/MessagesHolder.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MessagesHolderProps } from './MessagesHolder.types';
+export declare const MessagesHolder: FC<MessagesHolderProps>;

package/dist/components/Message/components/MessagesHolder/MessagesHolder.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useEffect } from "react";
+import { useForceUpdate } from "../../../../hooks/useForceUpdate.js";
+import { createPortal } from "react-dom";
+import { MessageList } from "../MessageList/MessageList.js";
+import { DEFAULT_CONTAINER } from "../../message.utils.js";
+import { config, messageQueue } from "../../message.js";
+const MessagesHolder = ({
+  messageSubscriptionController
+}) => {
+  var _a, _b;
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    messageSubscriptionController.subscribe(forceUpdate);
+    return () => messageSubscriptionController.unsubscribe(forceUpdate);
+  }, [messageSubscriptionController, forceUpdate]);
+  const placementKeys = Object.keys(messageQueue);
+  const container = ((_b = (_a = config).getContainer) == null ? void 0 : _b.call(_a)) ?? DEFAULT_CONTAINER;
+  return /* @__PURE__ */ jsx(Fragment, { children: placementKeys.map((placement) => messageQueue[placement].length > 0 && createPortal(/* @__PURE__ */ jsx(MessageList, { config, placement, messages: messageQueue[placement] }), container)) });
+};
+export {
+  MessagesHolder
+};

package/dist/components/Message/components/MessagesHolder/MessagesHolder.types.d.ts

@@ -0,0 +1,9 @@
+import { ConfigType, MessageQueue } from 'components/Message/message.types';
+export interface MessagesHolderProps {
+    config: ConfigType;
+    messageQueue: MessageQueue;
+    messageSubscriptionController: {
+        subscribe: (callback: () => void) => void;
+        unsubscribe: (callback: () => void) => void;
+    };
+}

package/dist/components/Message/forStories/utils.d.ts

@@ -0,0 +1,12 @@
+export declare const openInfoMessage: () => void;
+export declare const openSuccessMessage: () => void;
+export declare const openWarningMessage: () => void;
+export declare const openErrorMessage: () => void;
+export declare const openLoadingMessage: () => void;
+export declare const openTopLeftMessage: () => void;
+export declare const openTopMessage: () => void;
+export declare const openTopRightMessage: () => void;
+export declare const openBottomLeftMessage: () => void;
+export declare const openBottomMessage: () => void;
+export declare const openBottomRightMessage: () => void;
+export declare const openClosableMessage: () => void;

package/dist/components/Message/index.d.ts

@@ -0,0 +1,2 @@
+export { message, messagesHolder } from './message';
+export type { MessageObjectType } from './message.types';

package/dist/components/Message/message.d.ts

@@ -0,0 +1,9 @@
+import { ConfigType, MessageObjectType, MessageQueue } from './message.types';
+export declare let config: ConfigType;
+export declare let messageQueue: MessageQueue;
+export declare const messageSubscriptionController: {
+    subscribe: (callback: () => void) => void;
+    unsubscribe: (callback: () => void) => void;
+};
+export declare const messagesHolder: import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const message: MessageObjectType;

package/dist/components/Message/message.js

@@ -0,0 +1,105 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { defaultConfig } from "./message.utils.js";
+import { isString, isUndefined } from "lodash-es";
+import { Message } from "./components/Message/Message.js";
+import { MessagesHolder } from "./components/MessagesHolder/MessagesHolder.js";
+let config = {
+  ...defaultConfig
+};
+let messageQueue = {
+  top: [],
+  topLeft: [],
+  topRight: [],
+  bottom: [],
+  bottomLeft: [],
+  bottomRight: []
+};
+const placementByMessageKey = /* @__PURE__ */ new Map();
+let messagesSubscriptions = [];
+const subscribe = (callback) => {
+  messagesSubscriptions.push(callback);
+};
+const unsubscribe = (callback) => {
+  messagesSubscriptions = messagesSubscriptions.filter((item) => item !== callback);
+};
+const notifySubscribers = () => {
+  messagesSubscriptions.forEach((callback) => callback());
+};
+const changeConfig = (newConfigValues) => {
+  config = {
+    ...config,
+    ...newConfigValues
+  };
+  notifySubscribers();
+};
+const removeMessage = (MessageKey) => {
+  const placement = placementByMessageKey.get(MessageKey);
+  if (isUndefined(placement)) {
+    return;
+  }
+  messageQueue = {
+    ...messageQueue,
+    [placement]: messageQueue[placement].filter((item) => item.key !== MessageKey)
+  };
+  placementByMessageKey.delete(MessageKey);
+  notifySubscribers();
+};
+const addMessage = (task) => {
+  const placement = (task == null ? void 0 : task.placement) ?? config.placement ?? "bottomRight";
+  const key = task.key ?? Date.now().toString() + Math.floor(Math.random() * 1e3);
+  const duration = task.duration ?? config.duration;
+  const closeHandle = () => {
+    var _a;
+    removeMessage(key);
+    (_a = task == null ? void 0 : task.onClose) == null ? void 0 : _a.call(task);
+  };
+  const placementMessageQueue = isUndefined(config.maxCount) || config.maxCount > messageQueue[placement].length ? [...messageQueue[placement], {
+    key,
+    content: /* @__PURE__ */ createElement(Message, { ...task, duration, onClose: closeHandle, key })
+  }] : [...messageQueue[placement].slice(1), {
+    key,
+    content: /* @__PURE__ */ createElement(Message, { ...task, duration, onClose: closeHandle, key })
+  }];
+  messageQueue = {
+    ...messageQueue,
+    [placement]: placementMessageQueue
+  };
+  placementByMessageKey.set(key, placement);
+  notifySubscribers();
+  return key;
+};
+const methods = ["success", "info", "warning", "error", "loading"];
+const baseMethods = {
+  open: addMessage,
+  config: changeConfig,
+  destroy: removeMessage
+};
+const messageObject = baseMethods;
+methods.forEach((type) => {
+  messageObject[type] = (args) => {
+    if (isString(args)) {
+      return addMessage({
+        content: args,
+        type
+      });
+    }
+    return addMessage({
+      ...args,
+      type
+    });
+  };
+});
+const messageSubscriptionController = {
+  subscribe,
+  unsubscribe
+};
+const messagesHolder = /* @__PURE__ */ jsx(MessagesHolder, { config, messageQueue, messageSubscriptionController });
+const message = messageObject;
+export {
+  config,
+  message,
+  messageQueue,
+  messageSubscriptionController,
+  messagesHolder
+};

package/dist/components/Message/message.types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { MessageProps } from './components/Message/Message.types';
+export type MessagePlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
+export type MessageType = "success" | "info" | "warning" | "error" | "loading";
+export type MessageKey = string | number;
+export type SpecialMessageTaskType = Omit<MessageTaskType, "type">;
+export interface ConfigType {
+    duration?: number;
+    getContainer?: () => HTMLElement;
+    maxCount?: number;
+    prefixCls?: string;
+    rtl?: boolean;
+    placement?: MessagePlacement;
+    top?: number;
+    bottom?: number;
+    zIndex?: number;
+}
+export interface MessageQueueItem {
+    key: MessageKey;
+    content: ReactNode;
+}
+export type MessageQueue = Record<MessagePlacement, MessageQueueItem[]>;
+export interface MessageTaskType extends MessageProps {
+    key?: MessageKey;
+}
+export type MessageMethods = Record<MessageType, (args: SpecialMessageTaskType | string) => MessageKey>;
+export interface BaseMethods {
+    open: (args: MessageTaskType) => MessageKey;
+    config: (newConfigValues: ConfigType) => void;
+    destroy: (messageKey: MessageKey) => void;
+}
+export type MessageObjectType = MessageMethods & BaseMethods;

package/dist/components/Message/message.utils.d.ts

@@ -0,0 +1,3 @@
+import { ConfigType } from './message.types';
+export declare const DEFAULT_CONTAINER: HTMLElement;
+export declare const defaultConfig: ConfigType;