one-design-next 0.0.4-alpha.57

package/dist/input-otp/index.js

@@ -0,0 +1,87 @@
+import { HiddenInput, Input, Root } from '@radix-ui/react-one-time-password-field';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import "./style";
+var InputOtp = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$length = _ref.length,
+    length = _ref$length === void 0 ? 6 : _ref$length,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$autoSubmit = _ref.autoSubmit,
+    autoSubmit = _ref$autoSubmit === void 0 ? false : _ref$autoSubmit,
+    onAutoSubmit = _ref.onAutoSubmit,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
+    _onFocus = _ref.onFocus,
+    _onBlur = _ref.onBlur;
+  var innerRef = useRef(null);
+  var inputRefs = useRef([]);
+  useImperativeHandle(ref, function () {
+    if (innerRef.current) {
+      Object.assign(innerRef.current, {
+        focus: function focus() {
+          var _inputRefs$current$;
+          (_inputRefs$current$ = inputRefs.current[0]) === null || _inputRefs$current$ === void 0 || _inputRefs$current$.focus();
+        },
+        inputs: inputRefs.current
+      });
+    }
+    return innerRef.current;
+  });
+  useEffect(function () {
+    if (inputRefs.current.length > 0 && placeholder) {
+      inputRefs.current.forEach(function (input) {
+        input.placeholder = placeholder;
+      });
+    }
+  }, [placeholder]);
+  var inputs = Array.from({
+    length: length
+  }, function (_, index) {
+    return /*#__PURE__*/React.createElement(Input, {
+      ref: function ref(el) {
+        if (el) {
+          inputRefs.current[index] = el;
+        }
+      },
+      "data-odn-otp-input": true,
+      "data-odn-otp-input-intent": "normal",
+      "data-odn-otp-input-size": size,
+      key: index,
+      onFocus: function onFocus(e) {
+        return _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e, index);
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e, index);
+      }
+    });
+  });
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: innerRef,
+    "data-odn-otp-root": true,
+    autoComplete: autoComplete,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    value: value,
+    defaultValue: defaultValue,
+    autoSubmit: autoSubmit,
+    onAutoSubmit: onAutoSubmit,
+    onValueChange: onChange,
+    className: className,
+    style: style
+  }, inputs, /*#__PURE__*/React.createElement(HiddenInput, null));
+});
+InputOtp.displayName = 'InputOtp';
+export default InputOtp;

package/dist/input-otp/style/index.css

@@ -0,0 +1,114 @@
+html {
+  --odn-otp-padding-block-medium: 6px;
+  --odn-otp-width-medium: 30px;
+  --odn-otp-font-size-medium: 14px;
+  --odn-otp-line-height-medium: 1.5714285714285714;
+  --odn-otp-border-radius-medium: 6px;
+  --odn-otp-icon-size-medium: 16px;
+  --odn-otp-icon-margin-inline-medium: 4px;
+  --odn-otp-padding-block-small: 4px;
+  --odn-otp-width-small: 24px;
+  --odn-otp-font-size-small: 12px;
+  --odn-otp-line-height-small: 1.6666666666666667;
+  --odn-otp-border-radius-small: 6px;
+  --odn-otp-icon-size-small: 14px;
+  --odn-otp-icon-margin-inline-small: 4px;
+  --odn-otp-padding-block-large: 8px;
+  --odn-otp-width-large: 36px;
+  --odn-otp-font-size-large: 16px;
+  --odn-otp-line-height-large: 1.5;
+  --odn-otp-border-radius-large: 6px;
+  --odn-otp-icon-size-large: 18px;
+  --odn-otp-icon-margin-inline-large: 4px;
+  --odn-otp-bg-normal: #fff;
+  --odn-otp-bg-normal-hover: var(--odn-color-black-1);
+  --odn-otp-bg-normal-focus: #fff;
+  --odn-otp-bg-disabled: var(--odn-color-black-3);
+  --odn-otp-color-normal: var(--odn-color-black-12);
+  --odn-otp-color-normal-hover: var(--odn-color-black-12);
+  --odn-otp-color-normal-focus: var(--odn-color-black-12);
+  --odn-otp-color-disabled: var(--odn-color-black-8);
+  --odn-otp-border-normal: 1px solid var(--odn-color-black-6);
+  --odn-otp-border-normal-hover: 1px solid var(--odn-color-black-7);
+  --odn-otp-border-normal-focus: 1px solid var(--odn-color-blue-6);
+  --odn-otp-border-disabled: 1px solid var(--odn-color-black-6);
+  --odn-otp-shadow-normal: none;
+  --odn-otp-shadow-normal-hover: none;
+  --odn-otp-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
+  --odn-otp-shadow-disabled: none;
+}
+
+[data-odn-otp-root] {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+[data-odn-otp-input] {
+  text-align: center;
+  position: relative;
+  min-width: 0;
+  font-size: inherit;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+}
+
+[data-odn-otp-input-disabled=true] {
+  color: var(--odn-otp-color-disabled);
+  background: var(--odn-otp-bg-disabled);
+  border: var(--odn-otp-border-disabled);
+  box-shadow: var(--odn-otp-shadow-disabled);
+  cursor: not-allowed;
+}
+[data-odn-otp-input-disabled=true] [data-odn-otp] {
+  cursor: not-allowed;
+}
+
+[data-odn-otp-input-size=small] {
+  padding: var(--odn-otp-padding-block-small) 0;
+  width: var(--odn-otp-width-small);
+  font-size: var(--odn-otp-font-size-small);
+  line-height: var(--odn-otp-line-height-small);
+  border-radius: var(--odn-otp-border-radius-small);
+}
+
+[data-odn-otp-input-size=medium] {
+  padding: var(--odn-otp-padding-block-medium) 0;
+  width: var(--odn-otp-width-medium);
+  font-size: var(--odn-otp-font-size-medium);
+  line-height: var(--odn-otp-line-height-medium);
+  border-radius: var(--odn-otp-border-radius-medium);
+}
+
+[data-odn-otp-input-size=large] {
+  padding: var(--odn-otp-padding-block-large) 0;
+  width: var(--odn-otp-width-large);
+  font-size: var(--odn-otp-font-size-large);
+  line-height: var(--odn-otp-line-height-large);
+  border-radius: var(--odn-otp-border-radius-large);
+}
+
+[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]) {
+  color: var(--odn-otp-color-normal);
+  background: var(--odn-otp-bg-normal);
+  border: var(--odn-otp-border-normal);
+  box-shadow: var(--odn-otp-shadow-normal);
+}
+[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):hover {
+  color: var(--odn-otp-color-normal-hover);
+  background: var(--odn-otp-bg-normal-hover);
+  border: var(--odn-otp-border-normal-hover);
+  box-shadow: var(--odn-otp-shadow-normal-hover);
+}
+[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):focus {
+  color: var(--odn-otp-color-normal-focus);
+  background: var(--odn-otp-bg-normal-focus);
+  border: var(--odn-otp-border-normal-focus);
+  box-shadow: var(--odn-otp-shadow-normal-focus);
+}
+[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true])::selection {
+  background: var(--odn-otp-bg-normal-selection);
+}

package/dist/input-otp/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/input-otp/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/message/MessageBase.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import './style';
+export interface MessageProps {
+    /**
+     * @description 类名
+     */
+    className?: string;
+    /**
+     * @description 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 是否显示关闭按钮，可以结合 duration 0 来只点击关闭
+     */
+    closable?: boolean;
+    /**
+     * @description 内容
+     */
+    content: React.ReactNode;
+    /**
+     * @description 持续时间
+     */
+    duration?: number;
+    /**
+     * @description 获取容器，默认到 document.body
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * @description 类型
+     */
+    intent?: MessageIntent;
+    /**
+     * @description 关闭回调
+     */
+    onClose?: () => void;
+    /**
+     * @description 鼠标进入回调
+     */
+    onMouseEnter?: () => void;
+    /**
+     * @description 鼠标离开回调
+     */
+    onMouseLeave?: () => void;
+    /**
+     * @description 是否可折叠
+     */
+    collapsible?: boolean;
+    /**
+     * @description 是否可折叠
+     */
+    sameCollapsible?: boolean;
+}
+type MessageFunc = (config: MessageProps | string) => void;
+export type MessageIntent = 'info' | 'success' | 'warning' | 'danger' | 'error';
+export interface Message extends React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> {
+    info: MessageFunc;
+    success: MessageFunc;
+    warning: MessageFunc;
+    danger: MessageFunc;
+    error: MessageFunc;
+}
+export interface odnMessageState {
+    collapsed: boolean;
+    collapsible: boolean;
+    sameCollapsible: boolean;
+    sameCollapsed: boolean;
+    messages: {
+        id: string;
+        intent: MessageIntent;
+    }[];
+}
+declare global {
+    interface Window {
+        odnMessageState: odnMessageState;
+    }
+}
+export declare const updateStyles: () => void;
+export declare const Message: Message;
+export declare const createNewInstance: (renderer: {
+    render: (element: React.ReactElement, container: HTMLElement) => void;
+    unmount: (container: HTMLElement) => void;
+}) => (props: MessageProps) => {
+    destroy: () => void;
+};
+export declare const addStaticMethods: (MessageComponent: any) => void;
+export {};

package/dist/message/MessageBase.js

@@ -0,0 +1,395 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "style", "closable", "content", "duration", "getContainer", "intent", "onClose", "onMouseEnter", "onMouseLeave"],
+  _excluded2 = ["onClose", "getContainer", "intent", "collapsible", "sameCollapsible"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import Icon from "../icon";
+import "./style";
+var INTENTS = ['info', 'success', 'warning', 'danger', 'error'];
+var defaultProps = {
+  className: undefined,
+  style: {},
+  closable: false,
+  content: undefined,
+  duration: 3,
+  getContainer: function getContainer() {
+    return document.body;
+  },
+  intent: 'info',
+  onClose: undefined
+};
+
+// 更新样式的核心函数
+export var updateStyles = function updateStyles() {
+  // 拿到 html 上的 --odn-message-gap 的值
+  var messageGapStr = getComputedStyle(document.documentElement).getPropertyValue('--odn-message-gap');
+  var messageGap = parseInt(messageGapStr, 10) || 14;
+  var messageHeightStr = getComputedStyle(document.documentElement).getPropertyValue('--odn-message-height');
+  var messageHeight = parseInt(messageHeightStr, 10) || 54;
+  setTimeout(function () {
+    var _window$odnMessageSta = window.odnMessageState,
+      messages = _window$odnMessageSta.messages,
+      collapsed = _window$odnMessageSta.collapsed,
+      sameCollapsed = _window$odnMessageSta.sameCollapsed;
+    if (sameCollapsed) {
+      // 倒着遍历，将相同 intent 的 message 放在一起，构成一个二级数组
+      var messagesIntented = [];
+      var intentGroups = new Map();
+
+      // 先按 intent 分组
+      messages.forEach(function (message) {
+        var _intentGroups$get;
+        if (!intentGroups.has(message.intent)) {
+          intentGroups.set(message.intent, []);
+        }
+        (_intentGroups$get = intentGroups.get(message.intent)) === null || _intentGroups$get === void 0 || _intentGroups$get.push(message);
+      });
+
+      // 按照原始顺序将分组后的消息放入数组
+      var seenIntents = new Set();
+      messages.forEach(function (message) {
+        if (!seenIntents.has(message.intent)) {
+          seenIntents.add(message.intent);
+          var group = intentGroups.get(message.intent);
+          if (group) {
+            messagesIntented.push(group);
+          }
+        }
+      });
+
+      // 计算每个组的累计偏移值
+      var groupOffsets = messagesIntented.map(function (group, index) {
+        var offset = 0;
+        // 从当前组往后计算所有组的偏移值，只考虑每组最后三个消息
+        for (var i = index + 1; i < messagesIntented.length; i++) {
+          var nextGroup = messagesIntented[i];
+          var visibleCount = Math.min(3, nextGroup.length); // 最多只考虑三个消息
+          if (visibleCount === 1) {
+            offset += messageGap + messageHeight;
+          } else {
+            offset += messageGap + messageHeight + 7 * (visibleCount - 1);
+          }
+        }
+        return offset;
+      });
+      messagesIntented.forEach(function (messages, groupIndex) {
+        messages.forEach(function (_ref, index) {
+          var id = _ref.id;
+          var message = document.querySelector("[data-odn-message-container][data-id=\"".concat(id, "\"]"));
+          if (sameCollapsed) {
+            // 每组中最后三个消息显示，其他的隐藏
+            var visible = index >= messages.length - 3;
+            message.style.opacity = visible ? '1' : '0';
+            message.style.visibility = visible ? 'visible' : 'hidden';
+
+            // 计算当前消息的偏移值
+            var groupOffset = groupOffsets[groupIndex];
+            var messageOffset = messageGap * Math.min(2, messages.length - 1 - index); // 最多只考虑三个消息的偏移
+            var scale = 1 - 0.05 * Math.min(2, messages.length - 1 - index); // 最多只考虑三个消息的缩放
+
+            message.style.transform = "translate3d(0, ".concat(groupOffset + messageOffset, "px, 0) scale(").concat(scale, ")");
+          }
+        });
+      });
+    } else {
+      messages.forEach(function (_ref2, index) {
+        var id = _ref2.id;
+        var message = document.querySelector("[data-odn-message-container][data-id=\"".concat(id, "\"]"));
+        var visible = index >= messages.length - 3;
+        message.style.opacity = visible ? '1' : '0';
+        message.style.visibility = visible ? 'visible' : 'hidden';
+        if (collapsed) {
+          message.style.transform = "translate3d(0, ".concat(messageGap * (messages.length - 1 - index), "px, 0) scale(").concat(1 - 0.05 * (messages.length - 1 - index), ")");
+        } else {
+          message.style.transform = "translate3d(0, ".concat((messageGap + messageHeight) * (messages.length - 1 - index), "px, 0)");
+        }
+      });
+    }
+  }, 50);
+};
+export var Message = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? defaultProps.className : _ref3$className,
+    _ref3$style = _ref3.style,
+    style = _ref3$style === void 0 ? defaultProps.style : _ref3$style,
+    _ref3$closable = _ref3.closable,
+    closable = _ref3$closable === void 0 ? defaultProps.closable : _ref3$closable,
+    _ref3$content = _ref3.content,
+    content = _ref3$content === void 0 ? defaultProps.content : _ref3$content,
+    _ref3$duration = _ref3.duration,
+    duration = _ref3$duration === void 0 ? defaultProps.duration : _ref3$duration,
+    _ref3$getContainer = _ref3.getContainer,
+    getContainer = _ref3$getContainer === void 0 ? defaultProps.getContainer : _ref3$getContainer,
+    _ref3$intent = _ref3.intent,
+    intentProp = _ref3$intent === void 0 ? defaultProps.intent : _ref3$intent,
+    _ref3$onClose = _ref3.onClose,
+    onClose = _ref3$onClose === void 0 ? defaultProps.onClose : _ref3$onClose,
+    _ref3$onMouseEnter = _ref3.onMouseEnter,
+    onMouseEnter = _ref3$onMouseEnter === void 0 ? defaultProps.onMouseEnter : _ref3$onMouseEnter,
+    _ref3$onMouseLeave = _ref3.onMouseLeave,
+    onMouseLeave = _ref3$onMouseLeave === void 0 ? defaultProps.onMouseLeave : _ref3$onMouseLeave,
+    otherProps = _objectWithoutProperties(_ref3, _excluded);
+  var intent = INTENTS.includes(intentProp) ? intentProp : defaultProps.intent;
+  var domRef = useRef(null);
+  var timer;
+  var clearCloseTimer = function clearCloseTimer() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  var setCloseTimer = function setCloseTimer() {
+    if (duration) {
+      timer = setTimeout(function () {
+        if (onClose) {
+          onClose();
+        }
+      }, duration * 1000);
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    clearCloseTimer();
+    if (window.odnMessageState.collapsible) {
+      window.odnMessageState.collapsed = false;
+      updateStyles();
+    }
+    if (window.odnMessageState.sameCollapsible) {
+      window.odnMessageState.sameCollapsed = false;
+      updateStyles();
+    }
+    if (onMouseEnter) {
+      onMouseEnter();
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setCloseTimer();
+    if (window.odnMessageState.collapsible) {
+      window.odnMessageState.collapsed = true;
+      updateStyles();
+    }
+    if (window.odnMessageState.sameCollapsible) {
+      window.odnMessageState.sameCollapsed = true;
+      updateStyles();
+    }
+    if (onMouseLeave) {
+      onMouseLeave();
+    }
+  };
+  useEffect(function () {
+    setCloseTimer();
+    return function () {
+      clearCloseTimer();
+      if (window.odnMessageState.messages) {
+        window.odnMessageState.messages = window.odnMessageState.messages.filter(function (message) {
+          var _domRef$current;
+          return message.id !== ((_domRef$current = domRef.current) === null || _domRef$current === void 0 ? void 0 : _domRef$current.dataset.id);
+        });
+      }
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      close: function close() {
+        if (onClose) {
+          onClose();
+        }
+      },
+      getDomNode: function getDomNode() {
+        return domRef.current;
+      }
+    };
+  });
+  var iconMap = {
+    info: 'info-circle-filled',
+    danger: 'cancel-circle-filled',
+    warning: 'alert-circle-filled',
+    success: 'check-circle-filled',
+    error: 'cancel-circle-filled'
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-message": true,
+    "data-odn-message-intent": intent,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: domRef,
+    className: className,
+    style: style
+  }, otherProps), /*#__PURE__*/React.createElement(Icon, {
+    "data-odn-message-prefix-icon": true,
+    name: iconMap[intent]
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-odn-message-content": true
+  }, content), closable && /*#__PURE__*/React.createElement("svg", {
+    "data-odn-message-close-icon": true,
+    viewBox: "0 0 18 18",
+    onClick: function onClick() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.1265 4.93709C14.3218 4.74183 14.3218 4.42524 14.1265 4.22998L13.773 3.87643C13.5777 3.68117 13.2611 3.68116 13.0659 3.87643L9.00002 7.94229L4.93416 3.87643C4.7389 3.68117 4.42231 3.68117 4.22705 3.87643L3.8735 4.22998C3.67824 4.42524 3.67824 4.74183 3.8735 4.93709L7.93936 9.00295L3.8735 13.0688C3.67824 13.2641 3.67824 13.5807 3.8735 13.7759L4.22705 14.1295C4.42231 14.3247 4.7389 14.3247 4.93416 14.1295L9.00002 10.0636L13.0659 14.1295C13.2611 14.3247 13.5777 14.3247 13.773 14.1295L14.1265 13.7759C14.3218 13.5807 14.3218 13.2641 14.1265 13.0688L10.0607 9.00295L14.1265 4.93709Z",
+    fillRule: "evenodd"
+  })));
+});
+
+// 通用的 newInstance 逻辑
+export var createNewInstance = function createNewInstance(renderer) {
+  return function (props) {
+    var onClose = props.onClose,
+      getContainer = props.getContainer,
+      _props$intent = props.intent,
+      intent = _props$intent === void 0 ? 'info' : _props$intent,
+      _props$collapsible = props.collapsible,
+      collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+      _props$sameCollapsibl = props.sameCollapsible,
+      sameCollapsible = _props$sameCollapsibl === void 0 ? false : _props$sameCollapsibl,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+    var id = Math.random().toString(36).substring(2, 15);
+    var container = document.createElement('div');
+    container.dataset.odnMessageContainer = 'true';
+    container.dataset.odnMessageIntent = intent;
+    container.dataset.id = id;
+    var dest = getContainer ? getContainer() : document.body;
+    var newObj = {
+      id: id,
+      intent: intent
+    };
+    if (!window.odnMessageState) {
+      window.odnMessageState = {
+        collapsible: collapsible,
+        sameCollapsible: sameCollapsible,
+        collapsed: collapsible,
+        sameCollapsed: sameCollapsible,
+        messages: [newObj]
+      };
+    } else {
+      var newMessages = _toConsumableArray(window.odnMessageState.messages);
+      if (collapsible !== undefined) {
+        window.odnMessageState.collapsible = collapsible;
+        window.odnMessageState.collapsed = collapsible;
+      }
+      if (sameCollapsible !== undefined) {
+        window.odnMessageState.sameCollapsible = sameCollapsible;
+        window.odnMessageState.sameCollapsed = sameCollapsible;
+      }
+      newMessages.push(newObj);
+      if (sameCollapsible) {
+        // 如果 sameCollapsible 为 true，则从最后一个往前找，如果碰到相同的 intent，则放在该项之后，如果碰到不同的 intent，则排在刚才所有相同 intent 的后面
+        var insertIndex = newMessages.length - 1;
+        var foundSameIntent = false;
+        var lastSameIntentIndex = -1;
+
+        // 先找到最后一个相同类型的消息的位置
+        for (var i = newMessages.length - 1; i >= 0; i--) {
+          if (newMessages[i].intent === intent) {
+            lastSameIntentIndex = i;
+            foundSameIntent = true;
+          } else if (foundSameIntent) {
+            // 如果已经找到相同类型的消息，且遇到了不同类型的消息，就停止搜索
+            break;
+          }
+        }
+        if (lastSameIntentIndex !== -1) {
+          // 如果找到了相同类型的消息，就放在它的后面
+          insertIndex = lastSameIntentIndex + 1;
+        } else {
+          // 如果没有找到相同类型的消息，就放在最后一个位置
+          insertIndex = newMessages.length;
+        }
+
+        // 将新消息插入到正确的位置
+        newMessages.splice(insertIndex, 0, newObj);
+        // 移除之前添加的最后一个元素（因为我们已经把它插入到正确的位置了）
+        newMessages.pop();
+
+        // 重新排序，确保相同类型的消息相邻，且新消息在最后
+        var sameIntentMessages = newMessages.filter(function (msg) {
+          return msg.intent === intent && msg.id !== newObj.id;
+        });
+        var otherMessages = newMessages.filter(function (msg) {
+          return msg.intent !== intent;
+        });
+
+        // 将相同类型的消息放在一起，新消息在最后
+        newMessages.length = 0;
+        newMessages.push.apply(newMessages, _toConsumableArray(otherMessages).concat(_toConsumableArray(sameIntentMessages), [newObj]));
+      }
+      window.odnMessageState.messages = newMessages;
+    }
+    var instance;
+    updateStyles();
+    var close = function close() {
+      if (onClose) {
+        onClose();
+      }
+      window.odnMessageState.messages = window.odnMessageState.messages.filter(function (message) {
+        return message.id !== id;
+      });
+      container.style.opacity = '0';
+      container.style.visibility = 'hidden';
+      container.style.transition = '0.15s cubic-bezier(0, 0, 0.2, 1) all';
+      updateStyles();
+      setTimeout(function () {
+        var _container$parentNode;
+        renderer.unmount(container);
+        (_container$parentNode = container.parentNode) === null || _container$parentNode === void 0 || _container$parentNode.removeChild(container);
+      }, 300);
+    };
+    renderer.render( /*#__PURE__*/React.createElement(Message, _extends({
+      ref: function ref(message) {
+        instance = message;
+      },
+      onClose: close,
+      intent: intent
+    }, otherProps)), container);
+
+    // 将容器添加到目标元素
+    dest.appendChild(container);
+    return {
+      destroy: function destroy() {
+        if (instance) {
+          instance.close();
+        }
+        dest.removeChild(container);
+      }
+    };
+  };
+};
+
+// 添加静态方法
+export var addStaticMethods = function addStaticMethods(MessageComponent) {
+  INTENTS.forEach(function (intent) {
+    MessageComponent[intent] = function (config) {
+      var cnfg = {
+        intent: intent
+      };
+      if (typeof config === 'string') {
+        cnfg = {
+          content: config,
+          intent: intent
+        };
+      } else {
+        cnfg = config;
+      }
+      return MessageComponent.newInstance(_objectSpread(_objectSpread({}, cnfg), {}, {
+        intent: intent
+      }));
+    };
+  });
+};